在開發(fā)大型項目中，經(jīng)常都是需要多人合作的。相信大家一定都非常頭疼于修改別人的代碼的吧，而合理的使用eslint規(guī)范可以讓我們在代碼review時變得輕松，也可以讓我們在修改小伙伴們的代碼的時候會更加清晰。但是往往在開發(fā)過程中由于我們個人習慣的不通經(jīng)常會先關(guān)掉一些eslint的屬性，又或者每個人對于eslint的配置也是不一樣的，所以當我們統(tǒng)一配置eslint之后，我們可以通過vscode或者webstorm插件配置eslint規(guī)范，自動修改關(guān)于eslint的問題。

一、eslint規(guī)范

使用vue-cli3搭建vue項目初始化時，會有選擇eslint的設(shè)置，一般情況下，設(shè)置使用?'eslint:recommended'，也可以在.eslintrc.js配置其他覺得適合項目的一些eslint規(guī)范（詳細eslint規(guī)則參考：https://cn.eslint.org/docs/rules/）：

module.exports = {root: true,env: {node: true,},extends: ['plugin:vue/essential','@vue/airbnb','eslint:recommended'],rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-trailing-spaces': 'error', // 禁止行尾空格'linebreak-style': [0, 'error', 'windows'],'import/extensions': 'off',"comma-dangle": ["error", "never"], // 禁止行尾逗號"semi": ["error", "never"], // 禁止分號"space-before-blocks": "error", // 強制在塊之前使用一致的空格"comma-spacing": "error", // 逗號后面加空格'indent': [2, 2, {'SwitchCase': 1}], //代碼首行縮進規(guī)定，switchcase的設(shè)置比較特別，如果直接設(shè)置'indent':2,使用代碼自動校驗會發(fā)現(xiàn)switch代碼段無法校驗通過 },parserOptions: {parser: 'babel-eslint',}, };

?二、自動修復(fù)eslint報錯

vscode安裝插件vetur,prettier,eslint配置相對應(yīng)的eslint規(guī)范可自動幫我們修復(fù)一些eslint報錯問題，以下是一些基本的配置：

"vetur.format.defaultFormatter.js": "prettier-eslint","vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": {"wrap_attributes": "force-aligned"},"editor.detectIndentation": false,// 重新設(shè)定tabsize"editor.tabSize": 2,// "editor.formatOnSave": true, // 保存時自動格式化 --vscode編輯器自帶自動格式化會與設(shè)置的eslint規(guī)范有所沖突導(dǎo)致eslint報錯"eslint.autoFixOnSave": true, //保存時使用eslint規(guī)范自動格式化// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],"prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進行校驗 （如果未安裝prettier或者不需要prettier格式化可以不用設(shè)置prettier這些屬性）"prettier.semi": false, // 去掉代碼結(jié)尾的分號 "prettier.singleQuote": true, // 使用帶引號替代雙引號

收藏：https://www.haorooms.com/post/vscode_eslint

?

轉(zhuǎn)載于:https://www.cnblogs.com/layaling/p/10821529.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的vscode自动修复eslint规范的插件及配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。