vscode如何优雅的拥抱eslint _vscode

文章插图

文章插图
# vscode如何优雅的拥抱eslint
[vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)开源了不到两个月收获了![social](https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=social)个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)

【vscode如何优雅的拥抱eslint】

vscode如何优雅的拥抱eslint

推荐阅读

中国十大名茶庐山云雾茶六大品鉴方法

麻疹的症状

以貌取人是一种高情商行为，男人的长相能暴露了他是否适合你

鱼来鱼去|蔡少芬飒爽帅气，谢娜造型仿佛看到''华筝''，妻子们蒙古族服装

炸酥肉@怎么炸酥肉很膨胀很脆

奔驰7款新车泄露！换代C级全系1.5T，全新S级即将上市

怎么瘦腿和手臂比较好？

酒后不能吃什么水果

解放军报|点亮北斗星光

亚美尼亚|亚美尼亚：军队精锐快打光了，动员全国20岁女性发武器打巷战

尼泊尔比尔甘杰市长确诊感染新冠病毒

央视新闻客户端|疫情形势趋缓，?哈萨克斯坦新增1630例新冠肺炎确诊病例

虎扑|梅西达成制造1000个进球里程碑，705球+295助攻

披荆斩棘|谁红捧谁？《披荆斩棘》给范世琦设计的舞台，藏了4个心眼子

广州新增境外输入确诊病例2例详情公布

朋友圈个性标签怎么弄的，朋友圈个性签名该咋得才可以改

热血传奇手游|11月9日异界入侵玩法开启

[邓锄头挖科技]“泛在网络”机器之间互通的智能社区如何给人带来方便？

微波炉热饭菜经常吃对身体有没有影响微波炉热饭菜几分钟

次元快讯|时隔三天郑爽再次直播，时间短没失控但状态差，脸也要崩了？