Required VSCode plugins:
- ESLint
- Vetur
- Prettier is NOT necessary to be installed
IMPORTANT:
- don't put the .vscode folder (with the settings.json file) in the gitignore file:
There are 2 files and 1 user settings file that have to be edited:
/////////////////////////////////// .eslintrc.js ///////////////////////////////////
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier/vue', 'plugin:prettier/recommended'],
plugins: ['prettier'],
rules: {
'vue/require-default-prop': 0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': [
2,
{
printWidth: 500,
tabWidth: 2,
singleQuote: true,
arrowParens: 'always'
}
]
},
globals: {
$nuxt: true
},
parserOptions: {
parser: 'babel-eslint'
}
};
/////////////////////////////////// package.json ///////////////////////////////////
// dependencies
"@vue/cli-plugin-eslint": "^3.4.0",
// devDependencies
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.2.2",
"prettier": "^1.17.1",
////////// user settings file in vs code
{
"workbench.iconTheme": "material-icon-theme",
"search.exclude": {
"**/bower_components": true
},
"workbench.colorTheme": "CodeSandbox",
"breadcrumbs.enabled": false,
"showMusicMetrics": false,
"showGitMetrics": false,
"showWeeklyRanking": false,
"workbench.editor.showTabs": true,
// linting
// "vetur.format.defaultFormatter.css": "none",
// "vetur.format.defaultFormatter.postcss": "none",
// "vetur.format.defaultFormatter.scss": "none",
// "vetur.format.defaultFormatter.less": "none",
// "vetur.format.defaultFormatter.stylus": "none",
// "vetur.format.defaultFormatter.ts": "none",
// "vetur.format.defaultFormatter.js": "prettier",
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// "vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
// {
// "language": "vue-html",
// "autoFix": true
// },
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.formatOnSave": false,
"vetur.validation.template": false
// "eslint.enable": true,
// "editor.tabSize": 2,
// "eslint.alwaysShowStatus": true
}
/////////////////////////////////// settings.json ///////////////////////////////////
{
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "vue-html",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.formatOnSave": false,
"vetur.validation.template": false
// "eslint.enable": true,
// "editor.tabSize": 2,
// "eslint.alwaysShowStatus": true
}
For adding a git hook that will check the code for linting errors when trying to commit, you have to install: npm i --save-dev lint-staged
// add this to package.json
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}