After creating a new Vue 3 application using either create-vue or vite do the following steps:
1. Install the following dev dependencies
yarn add -D @babel/eslint-parser eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier
2. Add .eslintrc.js file in the project root
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
"plugin:vue/recommended",
"eslint:recommended",
"plugin:prettier/recommended"
],
rules: {
"prettier/prettier": "error",
"vue/component-name-in-template-casing": ["error", "PascalCase"],
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
globals: {
$nuxt: true
},
parserOptions: {
parser: "@babel/eslint-parser",
requireConfigFile: false
}
};
3. Add .prettierrc.json in the project root
{
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
4. Optionally you can add a jsconfig.json file in the project root
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
],
"~~/*": [
"./*"
],
"@@/*": [
"./*"
]
}
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
5. If you have installed the Prettier extension, check settings.json if the following is configured:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
Top comments (0)