WebStorm、IDE、VSCode集成Eslint

VSCode插件大法好。
简单可执行的方案&＃xff0c;直接安装 VSCode ESlint 插件&＃xff0c;提示、修复不合规代码。
下面内容都是过时的。忽略忽略~

1. 自动检测语法错误&＃xff0c;提升代码质量的同时也是的代码风格统一&＃xff0c;较少交接成本。
2. 结合IDE自动解决低级语法错误&＃xff0c;提高开发效率。

1. ESLint是什么&＃xff1f;
   ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的Javascript代码检测工具。

2. 为什么要用ESlint&＃xff1f;
   保证团队内代码风格统一、提高代码质量、减少低级错误等

3. 使用ESLint的成本&＃xff1f;
   对于各方和团队都有需要一定的事件适应。适应之后对团队和个人的收益远大于成本

4. 如何使用ESLint&＃xff1f;
   npm i -g eslint &＃61;> eslint index.js &＃61;> eslint --fix index.js
   http://eslint.cn/docs/user-guide/command-line-interface

5. 安装
   

   ESLint中文文档&＃xff1a; http://eslint.cn/docs/user-guide/getting-started

项目集成&＃xff1a;

由于我们项目已经集成了ESLint。接下来我们看一下该项目中是如何集成ESLint。

1. 在项目内安装ESLint。
   
2. 设置ESLint规则。
   
3. 在webpack中调用ESLint
   
4. eslint-loader 与 ESLint之间的关系
   

开发工具集成

集成后&＃xff0c;开发工具可以可视化的提示代码不规范的地方&＃xff0c;并且自动fix不规范的地方。

WebStorm、IDE

1. 开启开发工具ESLint工具&＃xff0c;并修改配置路径
   Preferences > 搜索&＃xff1a;ESLint
   
2. 配置项目Code Style
   Prederences > Editor > Code Style > Javascript
   

VSCode

集成前&＃xff0c;默认您的VSCode已经安装完vue相关插件&＃xff0c;能正常开发项目。

1. 安装VSCode相关插件
   ESLint、Vetur、Prettier。
   Tip&＃xff1a;图中为我个人的已安装的插件&＃xff0c;并不要求全部安装&＃xff0c;对插件感兴趣的了解一下用途。
   

2. 修改插件设置
   将以下参数填入VSCode 用户设置 或 工作区设置。两者区别就是字面意思。

{"files.autoSave": "afterDelay","files.autoSaveDelay": 800,"editor.formatOnSave": true,"eslint.autoFixOnSave": true,"Javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,"prettier.singleQuote": true,"prettier.eslintIntegration": true,"eslint.validate": ["Javascript","Javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],"eslint.alwaysShowStatus": true,"vetur.format.defaultFormatter.html": "prettyhtml","vetur.format.styleInitialIndent": true,"vetur.format.scriptInitialIndent": true,"editor.quickSuggestions": {"other": true,"comments": true,"strings": true},"Javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
}

• 如何启用自动格式化
  快捷键主动触发格式化&＃xff1a;
  
  手动保存触发格式化&＃xff1a;
  • Mac&＃xff1a;Command &＃43; S
  • Windows&＃xff1a;Ctrl &＃43; S

1. 目前项目采用的rules配置介绍&＃xff1a;
   附带中文解释&＃xff1a;https://github.com/yuliangGit/blog/blob/master/rules-chinese.js

2. ESLint rule 规则详解页面
   替换url末尾的 规则名称&＃xff08;no-console&＃xff09;&＃xff0c;可以查看不同规则的详解
   http://eslint.cn/docs/4.0.0/rules/no-console

1. 如何为ESLint贡献一个自定义的rule&＃xff1f;
   http://eslint.cn/docs/developer-guide/working-with-rules
   no-console 源码参考:https://github.com/yuliangGit/blog/blob/master/no-console-code.js

2. 如何编写一个ESLint插件&＃xff1f;
   规范文档&＃xff1a;http://eslint.cn/docs/developer-guide/working-with-plugins
   示例&＃xff1a;https://github.com/standard/eslint-plugin-standard

• ESLint官网 http://eslint.cn/
• Airbnb 规则中文文档 https://github.com/yuche/Javascript