前面一開始的時候我並沒有在項目中增加eslint代碼規範，eslint對於協同工作和代碼規範都是很重要的工具，那麼現在就在已有的項目上配置eslint。
1.通過vue add eslint命令
官網配置地址
命令安裝相關依賴之後，會彈出相關的配置選項
1） Pick an ESLint config，選擇Prettier
2） Pick additional lint features: 選擇Lint on save，即保存時修復錯誤語法
3） 選完之後你會多出.eslint.js文件
相關配置如下：
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
semi: [2, 'never'],
quotes: [2, 'single', { allowTemplateLiterals: true }],
},
}
4） 在src根目錄新建.prettierrc.js,該文件主要是配合prettier格式化使用
prettier官網
.prettierrc.js
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 4,
semi: false,
singleQuote: true,
}
5） 在src根目錄新建.editorconfig,該文件主要起到跨編輯器代碼約束的作用，通俗的將就是有人喜歡用webstorm,有人喜歡用vscode，保持兩種編輯器的基本代碼規範一樣
.editorconfig
# 告訴EditorConfig插件，這是根文件，不用繼續往上查找
root = true
# 匹配全部文件
[*]
# 設置字符集
charset = utf-8
# 縮進風格，可選space、tab
indent_style = space
# 縮進的空格數
indent_size = 2
# 結尾換行符，可選lf、cr、crlf
end_of_line = lf
# 在文件結尾插入新行
insert_final_newline = true
# 刪除一行中的前後空格
trim_trailing_whitespace = true
# 匹配md結尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
2.在vue.config.js中進行eslint的相關配置
vue.config.js中的相關配置
module.exports = {
// 在開發環境保存並且修復
lintOnSave: process.env.NODE_ENV === 'development',
// eslint報錯遮罩
devServer: {
overlay: {
warnings: true,
errors: true
}
},
chainWebpack(config){
// 注入eslint規則
config.module.rule('eslint')
config.module.rule('eslint').use('eslint-loader')
}
}
3.vscode的eslint相關配置
1) 在vscode插件管理中添加vetur和prettier兩個插件
2）配置settings.json文件
操作步驟
文件->首選項->設置
打開用戶設置,setting.json文件
這裏我直接粘貼我的配置文件，裏面註釋很詳細
{
"git.ignoreMissingGitWarning": true,
"workbench.startupEditor": "newUntitledFile",
"editor.suggestSelection": "first",
// vscode默認啓用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 2,
"window.zoomLevel": 0,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"files.associations": {
"*.wpy": "vue",
"*.wxss": "css",
"*.htm": "html"
},
// #讓函數(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.insertSpaceAfterSemicolonInForStatements": false,
"typescript.format.insertSpaceAfterSemicolonInForStatements": false,
"open-in-browser.default": "google chrome", //默認瀏覽器
// VScode 文件搜索區域配置
"search.exclude": {
"**/dist": true,
"**/build": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true,
"**/node_modules/**": true,
"**/bower_components/**": true,
"**/image/**": true,
"**/*.xml": true,
"**/.history/**": true,
"**/nbproject/**": true,
"**/vscode/**": true
},
// 用來忽略工程打開的文件夾
"files.exclude": {
"**/.vscode": true,
"**/.DS_Store": true,
"**/.history": true,
"**/nbproject": true
},
// 配置emmet是否啓用tab展開縮寫
"emmet.triggerExpansionOnTab": true,
// 配置emmet對文件類型的支持
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加對emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact",
"wxml": "html",
"javascript": "javascriptreact"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src",
"components": "${workspaceRoot}/src/components",
"assets": "${workspaceRoot}/src/assets",
"util": "${workspaceRoot}/src/util",
"plugin": "${workspaceRoot}/src/plugin"
},
"cssrem.rootFontSize": 37.5,
"leetcode.endpoint": "leetcode-cn",
"C_Cpp.errorSquiggles": "Enabled",
// 如果打開註釋，文件中將不提醒eslint報錯
// "eslint.options": {
// "plugins": [
// "html"
// ]
// },
// -----------vetur 、 prettier結合配置eslint配置begin ----------------------
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// js-beautify-html settings here
},
"prettier": {
// Prettier option here
"semi": false,
"singleQuote": true,
"indent_size": "4",
"indent_char": " ",
"max_preserve_newlines": "5",
"preserve_newlines": true,
"keep_array_indentation": false,
"break_chained_methods": false,
"indent_scripts": "normal",
"brace_style": "collapse",
"space_before_conditional": true,
"unescape_strings": false,
"jslint_happy": false,
"end_with_newline": false,
"wrap_line_length": "0",
"indent_inner_html": false,
"comma_first": false,
"e4x": false,
"indent_empty_lines": false
}
},
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.format.enable": true,
// -----------vetur 、 prettier結合配置eslint配置end ----------------------
"editor.wordWrap": "on",
"terminal.integrated.rendererType": "dom",
"sync.gist": "",
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceUpload": true,
// 修改作者
"fileheader.Author": "Tommy·Yang",
"fileheader.LastModifiedBy": "Tommy·Yang",
"explorer.confirmDelete": false,
}
這些配置好之後需要自定配置規範的可以到eslint官網進行查閱，並在.eslintrc.js文件中進行相關規則的配置。
我給大家看看配置後的效果，基本上每次自動報錯都保存的時候都會修復
最後說明一點，如果你的項目中之前忘記加了eslint，這時候你的項目文件會有很多eslint報錯信息，那麼此時你可以執行yarn lint / npm run lint 命令可以修復大部分eslint報錯。