vscode如何优雅的拥抱eslint

# vscode如何优雅的拥抱eslint

[vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)开源了不到两个月收获了个star，项目前期借鉴了唐金州的mock自动导出，花裤衩的tagsview和permission，甚至后期项目的不少灵感也都来源于贤心和花裤衩的项目，页面的风格也跟ant design风格很类似，但我不甘心只做一个抄袭者，于是恶补了好多从前没有接触过的知识，这是我的第一篇文章，希望能帮助到大家

## eslint自动化修复配置

eslint的强大不用多说了吧，但有时候规范太过严格，会影响开发的心情，这个时候我们就需要用到```prettier```这个工具啦，他能自动帮我们规范语法，自动帮我们格式化代码，自动修改属性的顺序，这不是一个简单的代码格式化工具。

1.首先你需要在vscode商店下载```Prettier - Code formatter```这个工具

2.然后在你的项目package.json的devDependencies下安装这些开发依赖

```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.项目根目录新建prettier.config.js，注意一般开源的项目的换行符一般是lf，可自行百度搜索crlf与lf的区别，这里可以配置单引号还是双引号，行末要不要加分号，参数要不要加括号等等，个人比较喜欢行末加分号，js用双引号，当然你可以根据自己的喜好，自定义配置，百度搜索prettier官网即可

```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的配置开到最严格（变态模式）

```js

module.exports = {

root: true,

env: {

node: true,

},

extends: ["plugin:vue/recommended", "@vue/prettier"],//不要慌，不要怕，习惯了严格挺好的

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,

},

},

],

};

```

## 结语

vue-admin-beautiful已经默认开启了最严格的eslint规范，并实现了自动化修复

github地址 [vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)

集成版演示地址 [vue-admin-beautiful](http://mpfhrd48.sanxing.uz7.cn)

layui风格集成版演示地址 [vue-admin-beautiful](https://chu1204505056.gitee.io/vue-admin-beautiful-2)

横向布局集成版演示地址 [vue-admin-beautiful](http://chu1204505056.gitee.io/vue-admin-beautiful-4)

iview风格集成版演示地址 [vue-admin-beautiful](https://chu1204505056.gitee.io/vue-admin-beautiful-3)