工具系列——eslint的使用

最新推荐文章于 2024-09-08 08:19:06 发布

weixin_34112208

最新推荐文章于 2024-09-08 08:19:06 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1416844/blog/849666

本文详细介绍ESLint的安装配置过程，包括全局与本地安装、配置文件的编写方式、在webpack中的集成应用，以及如何自定义语法规则等内容。适用于希望统一项目代码风格的前端开发者。

2019独角兽企业重金招聘Python工程师标准>>>

eslint学习笔记

1. esLint介绍

做代码统一风格规范
- jslint jshint eslint
Eslint官网：http://eslint.cn/docs/user-guide/configuring

2. 快速开始

2.1. 全局和本地安装eslint

npm install eslint -g
npm install eslint -save-dev

2.2. 创建并编写配置文件

配置文件可以写成好多种方式
- .eslintrc.js（主流，推荐）
  - 配置文件内容请参考自定义规则
- .eslintrc.yaml文件
- .eslintrc.json
- 注释的写法
- 可以配置在npm的package.json文件中
特殊支持-React的支持
- 如果用了ES6的新语法那么需要下载一个模块支持，否则react中写定义箭头函数会报错
  - npm install babel-eslint -save
  - 在.eslintrc配置文件中添加"parser": "babel-eslint"

2.3. 在webpack中配置eslint-loader

下载npm install eslint-loader -save-dev
指定eslint的配置文件,如果不指定有默认的优先执行顺序
在loader中配置加载器

// react中
{
    enforce: "pre",
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options:{
        configFile:'.eslintrc.js'
    }
},

// vue中
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            js: [
                    'babel-loader',
                    {
                        loader: "eslint-loader",
                        options: {
                            configFile: '.eslintrc.js'
                        }
                    }
            ],
            css: 'style-loader!css-loader'
        }
    }
},

通过.eslintignore文件指定不需要走eslint规范的代码
之后执行webpack的运行命令就可以看到效果了

3. 自定义语法规则

http://eslint.cn/docs/rules/

// eslint的语法规则

module.exports = {
    // 开启推荐配置信息
    // "extends": "eslint:recommended",
    // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    "root": true,
    // 脚本在执行期间访问的额外的全局变量
    // 当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
    "globals" : {
        "window":true,
        "document":true,
        "$":true
    },
    // 设置插件
    // "plugins": [
    //     'html'
    // ],
    // 设置解析器选项（必须设置这个属性）
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            // "arrowFunctions": true,
            // "experimentalObjectRestSpread": true,
            // "classes": true,
            // "modules": true,
            // "defaultParams": true
        }
    },
    // 启用的规则及各自的错误级别
    "rules" : {
        // 禁止用console
        "no-console":0,
        // 禁止用分号
        "semi":[2,'never'],
        // 在同一个作用域中禁止多次重复定义
        "no-redeclare":1
    },
    // 指定你想启用的环境
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "babel-eslint"
};