还在每次写完代码以后,点击鼠标(或者使用快捷键)格式化文档让代码保持整齐?还在因为装了eslint后经常报出eslint校检语法错误而犯愁?——以至于装后又卸载eslint。这篇文章让你不再为语法校对烦恼,让你编程快到飞起。
vscode版本: 1.37.0
1、安装eslint
(1)vue项目中安装eslint插件
-
当你构建一个新的项目的时候,就以构建一个新的vue项目来说,默认把eslint安装就好。
-
如果项目中没有安装,那就只能手动安装了撒。传送门:eslint官网
$ npm install eslint --save-dev
(2)vscode中eslint扩展安装
- 我用的是vscode,如果你是用的其他工具自行google,反正原理都一样。
2、配置
- 进入到
setting.json
文件中,添加一下代码:
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
- 很多人配置不成功大部分都是添加代码方式不对,特意上一份我的配置文件截图:
3、结语
- 当你完成了如上所有的配置以后,当你
command+s(ctrl+s)
点击保存的时候,eslint就会帮你自动格式化以符合.eslintrc.js
文件中的规则,让你编程快到飞起,不用再为了修复eslint报错的冲突而烦恼。
- 你可以编辑自己的eslint规则或者直接拿别人的用:如饿了么团队的config,vue的config。