Want to learn Vue 3 fast? Vue.js 3 By Example is out now.
Buy it now at https://www.packtpub.com/product/vue-js-3-by-example/9781838826345
Sometimes, we want to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.
In this article, we’ll look at how to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.
How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?
To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.
First, we install a few packages into our Vue project by running:
npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-prettier
We install the ESLint with plugins for Vue projects.
Then we install extensions by pressing ctrl+shift+p in VS Code and search for ‘Extensions: Install Extension’.
Next, in the extensions search box on the left, we search for Prettier, ESLint, and Vetur and install them by clicking install.
After that, we press ctrl+shift+p in VS Code and search for ‘Preferences: Open Settings (JSON).
And then we paste the following into settings.json:
{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"editor.renderControlCharacters": false,
"editor.renderWhitespace": "none",
"javascript.updateImportsOnFileMove.enabled": "always",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.formatOnSave": true
},
"[scss]": {
"editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
"editor.formatOnSave": true
},
"typescript.updateImportsOnFileMove.enabled": "always",
"html.format.wrapLineLength": 80,
"files.insertFinalNewline": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[python]": {
"editor.formatOnType": true
},
"extensions.ignoreRecommendations": true,
"vue.codeActions.savingTimeLimit": 2000
}
to enable auto formatting and linting of Vue projects.
Finally, we create an .eslintrc.js file in the Vue project’s root and add:
module.exports = {
root: true,
env: {
node: true,
es2022: true,
},
extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
into the file to enable the extensions needed for auto linting and formatting.
Conclusion
To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.
Sometimes, we want to select parent element with CSS.
In this article, we’ll look at how to select parent element with CSS.
How to select parent element with CSS?
To select parent element with CSS, we can use the has pseudo-class.
For instance, we write
li:has(> a.active) {
/* styles to apply to the li tag */
}
to select the li that has the anchor element that has the active class.
We use > to get the direct children.
Conclusion
To select parent element with CSS, we can use the has pseudo-class.
Sometimes, we want to remove the space between inline or inline-block elements with CSS.
In this article, we’ll look at how to remove the space between inline or inline-block elements with CSS.
How to remove the space between inline or inline-block elements with CSS?
To remove the space between inline or inline-block elements with CSS, we can use flexbox.
For instance, we write
<p>
<span> Foo </span>
<span> Bar </span>
</p>
to add a p element with 2 spans.
Then we style them by writing
p {
display: flex;
}
span {
width: 100px;
font-size: 30px;
color: white;
text-align: center;
}
We make the p element a flex container with display: flex.
This will also remove the space between the child elements, which are the spans.
Then we style the span’s text with by changing the font size, color, and alignment.
Conclusion
To remove the space between inline or inline-block elements with CSS, we can use flexbox.
Sometimes, we want to center horizontally and vertically with CSS Flexbox.
In this article, we’ll look at how to center horizontally and vertically with CSS Flexbox.
How to center horizontally and vertically with CSS Flexbox?
To center horizontally and vertically with CSS Flexbox, we set flex-direction to column to make the main axis vertical.
Then we set justify-content to center to center the items vertically and set align-items to center to center them horizontally.
To do this, we write
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
to add some nested divs.
Then we write
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
to make the outer div a flex container with display: flex;.
Then we align the child divs to be centered vertically and horizontally with
flex-direction: column;
justify-content: center;
align-items: center;
We set the height so that flex-direction: column will be applied.
Conclusion
To center horizontally and vertically with CSS Flexbox, we set flex-direction to column to make the main axis vertical.
Then we set justify-content to center to center the items vertically and set align-items to center to center them horizontally.
Sometimes, we want to change an HTML5 input’s placeholder color with CSS.
In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.
How to change an HTML5 input’s placeholder color with CSS?
To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.
For instance, we write
::placeholder {
color: #909;
}
to set the input placeholder’s color to #909.
Conclusion
To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.
