I'd like to share my VSCode and ESLint configuration that I use in my Vue3 projects.
VsCode
Install the following extensions
- ESLint
- Vetur
Add the following in your vscode settings
"eslint.validate": [
"vue",
"javascript",
"javascriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"
Vue3 Project
After creating your vue3 project with vue create.
Remove any eslint configuration from your
package.jsonfile.Install some packages with npm
npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
- Create a
.eslintrc.jsfile at your project's root
module.exports = {
root: true,
env: {
browser: true,
},
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
extends: [
'airbnb-base',
'plugin:vue/vue3-essential',
'prettier/vue',
'plugin:prettier/recommended'
],
rules: {
'comma-dangle': 'off',
'class-methods-use-this': 'off',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'implicit-arrow-linebreak': 'off',
'import/prefer-default-export': 'off',
"vue/component-name-in-template-casing": ["error", "kebab-case", {
"ignores": []
}],
'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
},
};
- Restart VsCode
Check out the repository with this configuration done: https://github.com/alandecastros/vue3-starter
That's it!
Top comments (0)