【前端 - Vue】关于ESlint代码规范及格式化插件
本文主要解说：ESlint代码规范及手动修复，以及怎样通过eslint插件来实现主动修正目录
一、ESlint代码规范及手动修复
1.JavaScript Standard Style 规范阐明
2.代码规范错误
3.手动修正
二、通过eslint插件来实现主动修正
怎样安装
怎样设置
https://img-blog.csdnimg.cn/direct/8a86ba937b5544369293fdb88b4cff58.gif
一、ESlint代码规范及手动修复
思考代码应该有哪些规范：一套写代码的约定规则。例如：赋值符号的左右是否必要空格？一句结束是否是要加;？......
没有规矩不成方圆
ESLint:是一个代码查抄工具，用来查抄你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在自界说创建vue项目时，我们通常利用的是 JavaScript Standard Style 代码风格的规则。
1.JavaScript Standard Style 规范阐明
建议把：JavaScript Standard Style 看一遍，然后在写的时候, 遇到错误就查询解决。
下面是这份规则中的一小部门：
[*] 字符串利用单引号 – 必要转义的地方除外
[*] 关键字后加空格 if (condition) { ... }
[*] 函数名后加空格 function name (arg) { ... }
[*] 对峙利用全等 === ，摒弃 == ，但在必要查抄 null || undefined 时可以利用 obj == null
[*] ......
2.代码规范错误
如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。
下面我们在main.js中随意做一些改动：添加一些空行，空格。
import Vue from 'vue'
import App from './App.vue'
import './styles/index.less'
import router from './router'
Vue.config.productionTip = false
new Vue ( {
render: h => h(App),
router
}).$mount('#app')
按下生存代码之后：
你将会看在控制台中输出如下错误：
https://img-blog.csdnimg.cn/direct/ede555252b61477d92f75e3c3086d2a5.png
eslint 是来资助你的。心态要好，有错，就改。
3.手动修正
就是根据错误提示来一项一项手动修正。
如果你不认识下令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,.......）去 ESLint 规则列表中查找其具体寄义。
打开 ESLint 规则表，利用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。
https://img-blog.csdnimg.cn/direct/ac7a7c507a2b4ff1b2bfcbc6ec871d16.png
二、通过eslint插件来实现主动修正
[*] eslint会主动高亮错误显示
[*] 通过设置，eslint会主动资助我们修复错误
[*] 怎样安装
在VSCode编辑器中搜索Eslint插件，并点击安装
https://img-blog.csdnimg.cn/direct/d0c6908be20b40c99f4d63e3d689c198.png
[*] 怎样设置
在setting.json文件中，主要代码如下：
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
[*] 注意：eslint的设置文件必须在根目录下，这个插件才能才能见效。打开项目必须以根目录打开，一次打开一个项目
[*] 注意：利用了eslint校验之后，把vscode自带的那些格式化工具全禁用了
settings.json 代码参考
{
"window.zoomLevel": 2,
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
} https://img-blog.csdnimg.cn/direct/266db4e5c5d64b7eb573470b4ee09dfe.gif
页:
[1]