eslint是一款可自定义的JavaScript和JSX检查工具,通过在项目中引入eslint同时配置.eslintrc.js或.eslintConfig文件来实现对代码规范的约束。
之前一直用着默认的代码规范,直到2个不同项目的eslint配置搞得我头昏脑胀,决定今天把它办了。
首先eslint的官网是: https://eslint.org/(英文的),看不懂没关系,有中文的https://eslint.bootcss.com/docs/rules/。
大致就是这样的结构
| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 
 | module.exports = {root: true,
 env: {
 node: true
 },
 'extends': [
 'plugin:vue/essential',
 '@vue/standard'
 ],
 rules: {
 
 ...
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
 }
 
 | 
规则和值都能从上述网站中找到,不细说了。
现在来说在webstorm中,如何使用快捷键根据eslint规则修改代码。
之前我以为格式化代码不就是CTRL+SHIFT+L么,为啥还要单拎出来说?其实CTRL+SHIFT+L只是格式化代码,eslint的快捷键默认是未设置的,我们需要手动在设置中设置他。
操作步骤:
![]()
![]()
之后在代码报错的地方,只要输入CTRL+ALT+1,就能按eslint设置的规则格式化代码了。
舒服了。