# vscode如何優(yōu)雅的擁抱eslint
[vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)開源了不到兩個(gè)月收獲了個(gè)star，項(xiàng)目前期借鑒了唐金州的mock自動(dòng)導(dǎo)出，花褲衩的tagsview和permission，甚至后期項(xiàng)目的不少靈感也都來源于賢心和花褲衩的項(xiàng)目，頁(yè)面的風(fēng)格也跟ant design風(fēng)格很類似，但我不甘心只做一個(gè)抄襲者，于是惡補(bǔ)了好多從前沒有接觸過的知識(shí)，這是我的第一篇文章，希望能幫助到大家
## eslint自動(dòng)化修復(fù)配置
eslint的強(qiáng)大不用多說了吧，但有時(shí)候規(guī)范太過嚴(yán)格，會(huì)影響開發(fā)的心情，這個(gè)時(shí)候我們就需要用到```prettier```這個(gè)工具啦，他能自動(dòng)幫我們規(guī)范語法，自動(dòng)幫我們格式化代碼，自動(dòng)修改屬性的順序，這不是一個(gè)簡(jiǎn)單的代碼格式化工具。
1.首先你需要在vscode商店下載```Prettier - Code formatter```這個(gè)工具
2.然后在你的項(xiàng)目package.json的devDependencies下安裝這些開發(fā)依賴
```json
{
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.0.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.0.5",
}
```
3.項(xiàng)目根目錄新建prettier.config.js，注意一般開源的項(xiàng)目的換行符一般是lf，可自行百度搜索crlf與lf的區(qū)別，這里可以配置單引號(hào)還是雙引號(hào)，行末要不要加分號(hào)，參數(shù)要不要加括號(hào)等等，個(gè)人比較喜歡行末加分號(hào)，js用雙引號(hào)，當(dāng)然你可以根據(jù)自己的喜好，自定義配置，百度搜索prettier官網(wǎng)即可
```js
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
jsxSingleQuote: false,
trailingComma: "es5",
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "always",
vueIndentScriptAndStyle: false,
endOfLine: "lf",
};
```
4.最后把eslint的配置開到最嚴(yán)格（變態(tài)模式）
```js
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/recommended", "@vue/prettier"],//不要慌，不要怕，習(xí)慣了嚴(yán)格挺好的
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"vue/no-v-html": "off",
},
parserOptions: {
parser: "babel-eslint",
},
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: {
jest: true,
},
},
],
};
```
## 結(jié)語
vue-admin-beautiful已經(jīng)默認(rèn)開啟了最嚴(yán)格的eslint規(guī)范，并實(shí)現(xiàn)了自動(dòng)化修復(fù)
github地址 [vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)
集成版演示地址 [vue-admin-beautiful](http://mpfhrd48.sanxing.uz7.cn)
layui風(fēng)格集成版演示地址 [vue-admin-beautiful](https://chu1204505056.gitee.io/vue-admin-beautiful-2)
橫向布局集成版演示地址 [vue-admin-beautiful](http://chu1204505056.gitee.io/vue-admin-beautiful-4)
iview風(fēng)格集成版演示地址 [vue-admin-beautiful](https://chu1204505056.gitee.io/vue-admin-beautiful-3)
