ESLint 的正式使用感受

时间：2021-10-28 15:17:18

介绍ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性
  1. 所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
  2. 任意的rule 都是独立的
  3. 没有特定的coding style，你可以自己配置
 
安装
全局安装，适合你全部项目都需要eslint
$ npm install -g eslint
接下去安装配置文件
$ eslint --init
这个步骤会让你选择自己的风格
1、向你询问你的style
2、使用一些流行的style
3、通过你的文件来配置
 
基础配置
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended”,//可以选择一些流行的style 比如google
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "ecmaVersion": 7, 你的javascript 版本
        "sourceType": "module"
    },
    "plugins": [
        “react” //插件，支持react
    ],
    "rules": {
        "indent": [ //缩进
            "error”, //可选项为 off warn error 对应的数字 0 1 2
            "space"
        ],
        "linebreak-style": [//换行的style
            "error",
            "unix"
        ],
        "quotes": [//引号 是单的还是双的
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};
IDE的 插件
Sublime Text3
通过Package Control -> install Package -> SublimeLinter-eslint
WebStorm ESLint 的正式使用感受
常见问题
1、在sublime text 中jsx 不能使用linter。
     view->syntax->open all current extension as … -> javascript
2、在webstorm 提示
ESLint 的正式使用感受
提示
Cannot find module 'babel-eslint'
Error: Cannot find module 'babel-eslint'
我猜测是有些rule的包 在全局变量中没有安装。所以报的错误
用当前项目的eslint 就好了
ESLint 的正式使用感受
3、怎样让webstorm 的错误提示更明显呢？
哈哈，我也不知道答案 

相关文章