1.安裝eslint和prettier的node模塊
cnpm install eslint prettier --save-dev
cnpm install eslint-plugin-prettier --save-dev
2.安裝eslint和prettier插件捣郊，在vs code里面众羡。
3.插件eslint設(shè)置
{
// vscode默認啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 4,
// #每次保存的時候自動格式化
//"editor.formatOnSave": true,
// #每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
// "eslint.autoFixOnSave": true,
//上面是老版本設(shè)置，下面是新版本設(shè)置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.codeActionsOnSaveTimeout": 5000,
// 保存時自動格式化
"editor.formatOnSave": false,
// 添加 vue 支持
// "eslint.validate": [
// "javascript",
// "javascriptreact",
// {
// "language": "vue",
// "autoFix": true
// }
// ],
//上面是格式化的老版本設(shè)置议双，下面是新版本的設(shè)置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按用戶自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue組件中html代碼格式化樣式
}
},
// "editor.codeActionsOnSave": {
// "source.fixAll.eslint": true
// },
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.runtime": "",
"eslint.codeAction.showDocumentation": {
"enable": true
},
}
4..eslintrc.js設(shè)置
parser問題：
如果使用其他通用parsers，如babel-eslint汛闸，需要把他寫在parserOptions.parser里面而不是parser選項里
因為eslint-plugin-vue需要vue-eslint-parser解析器.vue文件蝙茶。重寫parser選項會導(dǎo)致eslint-plugin-vue不能使用。
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
parser: 'babel-eslint'
},
env: {
browser: true,
},
//擴展vue插件設(shè)置诸老，否則vue文件里面會報錯
//extends里面有'plugin:vue/recommended'相當于多設(shè)置了"parser": "vue-eslint-parser"隆夯。
extends: ["vue", "standard", "plugin:vue/recommended"],
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'eol-last': 0,
'space-before-function-paren': 0
}
}
