ESLint使用指南

最新推荐文章于 2023-06-18 15:11:47 发布

weixin_33717117

最新推荐文章于 2023-06-18 15:11:47 发布

阅读量168

点赞数

文章标签：开发工具 json webpack ViewUI

原文链接：https://my.oschina.net/pandon/blog/1844012

版权

为什么80%的码农都做不了架构师？>>>

介绍

在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

安装

局部安装

npm install eslint --save-dev

全局安装

npm install eslint --g

使用

eslint -c ~/my-eslint.json index.js

(-c指定配置文件，index.js为测试文件)

配置

使用 .eslintrc文件（支持 JSON 和 YAML 两种语法）
在 package.json中添加 eslintConfig 配置块
直接在代码文件中定义

项目中通常会采用第一种方案

exam

module.exports = {
	extends: 'eslint:recommended',
	env: {
	    node: true
	},
	rules: {
	    'no-console': 'off',
	    'indent': [ 'error', 4 ],
	    'quotes': [ 'error', 'single' ]
	}
};

配置：http://eslint.cn/docs/user-guide/configuring
规则（rules）：http://eslint.cn/docs/rules/

IDE集成

软件代替命令行，并提供可视化错误提示

所有集成：http://eslint.cn/docs/user-guide/integrations
Sublime Text 3：https://github.com/roadhump/SublimeLinter-eslint
Atom：https://atom.io/packages/linter-eslint
IntelliJ IDEA：https://plugins.jetbrains.com/plugin/7494-eslint
WebStorm：https://plugins.jetbrains.com/plugin/7494-eslint
Visual Studio Code：https://code.visualstudio.com/

webpack集成

构建过程中，执行命令行，并输出警告、错误日志。

依赖

"eslint": "^5.1.0",
"eslint-loader": "^2.0.0",
"babel-eslint": "^8.2.5"

exam

//webpack.config.js
module:{
	rules: [
        {
            test: /\.js$/,
            loader: ['eslint-loader'],
            enforce: "pre",   //核心，表示最先执行此rule，因为后执行的话，ES6源码可能已经转为ES5了，那eslint-loader将失效
            include: 'src/',
            exclude: 'node_modules/'
        }
    ]
}

插件

//react
"eslint-plugin-react": "^7.10.0"

自动修复

//依赖
npm eslint babel-eslint -g
//命令行：
eslint index.js --fix

VSCode：首选项-用户设置，内容是

{
    "eslint.options": {
        "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
        "language": "js",
        "autoFix": true
        }
    ]
}

优点：保存时自动修复
缺点：有些重复错误需多次保存，多次修复

Sublime： Tools > Build System > New Build System，新建ESLintAutoFix.sublime-build，内容是

{
    "shell_cmd": "eslint --fix $file" 
}

执行：选择菜单栏 Tools > Build System > ESLintAutoFix 或者使用快捷键 ctrl+b 运行刚刚创建的 build 文件。

优点：修复成功率高
缺点：手动修复

webstorm： webstorm自带eslint，开启就可以，也可以安装第三方插件 File>>Settings>>Languages & Frameworks>>JavaScript>>Code Quality Tools>>ESLint 将Enable开启即可，右键Fix ESLint Problems可自动修复

其他IDE未尝试。

综上，手动使用命令行的结果要比使用IDE集成的插件修复的结果更为优秀。

转载于:https://my.oschina.net/pandon/blog/1844012