在開(kāi)發(fā)大型項(xiàng)目中，經(jīng)常都是需要多人合作的。相信大家一定都非常頭疼于修改別人的代碼的吧，而合理的使用eslint規(guī)范可以讓我們?cè)诖areview時(shí)變得輕松，也可以讓我們?cè)谛薷男』锇閭兊拇a的時(shí)候會(huì)更加清晰。但是往往在開(kāi)發(fā)過(guò)程中由于我們個(gè)人習(xí)慣的不通經(jīng)常會(huì)先關(guān)掉一些eslint的屬性，又或者每個(gè)人對(duì)于eslint的配置也是不一樣的，所以當(dāng)我們統(tǒng)一配置eslint之后，我們可以通過(guò)vscode或者webstorm插件配置eslint規(guī)范，自動(dòng)修改關(guān)于eslint的問(wèn)題。

一、eslint規(guī)范

使用vue-cli3搭建vue項(xiàng)目初始化時(shí)，會(huì)有選擇eslint的設(shè)置，一般情況下，設(shè)置使用?'eslint:recommended'，也可以在.eslintrc.js配置其他覺(jué)得適合項(xiàng)目的一些eslint規(guī)范（詳細(xì)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"], // 禁止行尾逗號(hào)"semi": ["error", "never"], // 禁止分號(hào)"space-before-blocks": "error", // 強(qiáng)制在塊之前使用一致的空格"comma-spacing": "error", // 逗號(hào)后面加空格'indent': [2, 2, {'SwitchCase': 1}], //代碼首行縮進(jìn)規(guī)定，switchcase的設(shè)置比較特別，如果直接設(shè)置'indent':2,使用代碼自動(dòng)校驗(yàn)會(huì)發(fā)現(xiàn)switch代碼段無(wú)法校驗(yàn)通過(guò) },parserOptions: {parser: 'babel-eslint',}, };

?二、自動(dòng)修復(fù)eslint報(bào)錯(cuò)

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

"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, // 保存時(shí)自動(dòng)格式化 --vscode編輯器自帶自動(dòng)格式化會(huì)與設(shè)置的eslint規(guī)范有所沖突導(dǎo)致eslint報(bào)錯(cuò)"eslint.autoFixOnSave": true, //保存時(shí)使用eslint規(guī)范自動(dòng)格式化// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],"prettier.eslintIntegration": true, // 讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn) （如果未安裝prettier或者不需要prettier格式化可以不用設(shè)置prettier這些屬性）"prettier.semi": false, // 去掉代碼結(jié)尾的分號(hào) "prettier.singleQuote": true, // 使用帶引號(hào)替代雙引號(hào)

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

?

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

超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

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

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