eslint使用介绍

ESlint介绍和使用

前言

同一个功能不同程序的代码就像同一道红烧肉不同人的做法一样，各不相同，各有味道。在我们自己写项目就像我们自己做一道菜给自己吃，只要自己喜欢吃就行。但是在公司里项目是团队开发，相当于是厨师给一桌子客人做菜，如果仅仅只考虑自己的喜好是不行的，还必须得考虑其他团队成员的喜好，如果每一个开发者都按照自己的风格开发，那么就会出现一个项目的代码风格多异，不变维护，这也是ESLint诞生的基础。

ESLint介绍

• 官网地址
• ESLint是一个静态的代码检查工具，因为js的弱类型，在开发的时候比较容易出错，而且又不需要编译就可以直接执行，这样有时候在运行的时候会出现很多错误，只能依靠不断断点调试来解决。这样很多错误在编码的时候不容易暴露，会导致编程的成本增加。
• ESLint的初衷是为了让程序员可以创建自己的检测规则。ESLint的所有规则都被设计成可插入的。
• ESLint可以设置公司项目编码的细节规范，使得整个项目的代码规范保持统一。

ESLint的安装和使用

使用命令行

1. 安装node，ESLint依赖于node的环境。node官网，建议下载LTS版本。
2. 全局安装ESLint，作为命令来使用
   • npm i -g eslint
3. 新建一个文件夹vue执行npm init -y，生成package.json(在初始化eslint之前需要初始化eslint)
4. 初始化eslint配置文件.eslint
   • eslint --init

       D:\vue>eslint --init
           How would you like to use ESLint?
               To check syntax only 
               > To check syntax and find problems
               To check syntax, find problems, and enforce code style
           What type of modules does your project use?
               > JavaScript modules (import/export)
               CommonJS (require/exports)
               None of these
           Which framework does your project use?
               React
               > Vue.js
               None of these
           Does your project use TypeScript? » No / Yes  No
           Where does your code run? ...  (Press <space> to select, <a> to toggle all, 
           <i> to invert selection)  a
               √ Browser
               √ Node
           What format do you want your config file to be in?
               > JavaScript
               YAML
               JSON
           Would you like to install them now with npm? » No / Yes  Yes
   

5. 等待依赖安装完成，生成.eslintrc.js如下

       module.exports = {
           "env": {
               "browser": true,
               "es2021": true,
               "node": true
           },
           "extends": [
               "eslint:recommended",
               "plugin:vue/essential"
           ],
           "parserOptions": {
               "ecmaVersion": 13,
               "sourceType": "module"
           },
           "plugins": [
               "vue"
           ],
           "rules": {
           }
       };
   

6. 简单配置规则，修改eslint下面的rules

       // eslintrc.js
       module.exports = {
           // ...
           'rules': {
               'quotes': ['error', 'single'],  // 字符串必须使用单引号 使用双引号报错
               'semi': ['error', 'never'] // 每句话结束不需要加分号，加了报错
           }
       }
   

7. 修改package.json文件，添加script命令

       // package.json
       {
           // ...
           "scripts": {
               "lint": "eslint src",
               "lint-fix": "eslint src --fix"
           },
       }
       
   

   • eslint src 代表我们使用检测src下面所有的文件
   • --fix 代表自动修复一些可以修复的语法错误（并不代表所有语法错误都可以修复）
8. 在项目根目录下面新建一个src，在src下面新建一个test.js，文件夹目录结构如下：
   • pro
     • node_modules
     • src
       • test.js
     • .eslintrc.js
     • eslint.md
     • package.json
9. 在test.js里面编写代码如下

       // test.js
       var a = "哈哈哈";
   

10. 在项目根目录下打开命令行输入如下命令
    • npm run lint会出现如下错误提示

        1:5   error  'a' is assigned a value but never used  no-unused-vars 
        ### 变量定义未使用
        1:9   error  Strings must use singlequote            quotes
        ### 必须要使用单引号
        1:14  error  Extra semicolon                         semi
        ### 代码结束不能有分号
    

    • npm run lint-fix会出现如下错误提示，会修复上面两个错误，但是还有保留一个错误未能修复

        1:5  error  'a' is assigned a value but never used  no-unused-vars
    

    • 同时test.js代码变化为

        // test.js
        var a = '哈哈哈'
    

同步vscode配置

1. 安装插件eslint
   • 
2. 在项目根目录创建.eslintrc.js，此时vscode就可以提示eslint的语法错误，修改eslintrc.js可以同步修改vscode提示

.eslintrc.js文件介绍

• 官方地址
• eslintrc.js配置代码

    module.exports = {
        'env': {
            'browser': true,
            'es2021': true,
            'node': true
        },
        'extends': [
            'eslint:recommended',
            'plugin:vue/essential'
        ],
        'parserOptions': {
            'ecmaVersion': 13,
            'sourceType': 'module'
        },
        'plugins': [
            'vue'
        ],
        'rules': {
            'quotes': ['error', 'single'],
            'semi': ['error', 'never']
        }
    }

• 组成部分
  • env 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
    • browser - 浏览器环境中的全局变量
    • es2021 启用所有 ECMAScript 13 特性（该选项会自动设置 ecmaVersion 解析器选项为 13）
    • node Node.js 全局变量和 Node.js 作用域
  • extends 继承已有的规则rules 下面这两个都是已有的规则，我们可以直接继承此规则
    • eslint:recommended
    • plugin:vue/essential
  • parserOptions 配置解析器的选项
    • ecmaVersion 默认情况下，ESLint使用的是ECMAScript5语法，此处我们设置的选项是 es13
    • sourceType 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
  • plugins ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它
    • vue 在配置的时候直接写插件名称即可，此处就是vue插件 插件名称可以省略 eslint-plugin- 前缀
  • rules 启用的规则及其各自的错误级别
    • 规则相对于复杂而且会经常配置，我们单独来介绍规则

rules规则

• 介绍
  • eslint里面带有很多规则，开发者可以根据自身需要进行添加和移除。
• 规则组成
  • 两种形式
    • 规则名称：严重程度
    • 规则名称：[严重程度，规则属性]
  • 严重程度
    • "off" 或 0 - 关闭规则
    • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  • 规则属性
    • 不是所有的规则都有属性，有些规则只需要控制开启或者关闭，但是有些规则需要配置属性比如说quotes配置单引号single还是双引号double
  • 规则名称
    • indent 配置缩进规则
    • quotes 配置引号
    • no-console 配置是否禁用console
    • 更多规则表移除官方查看

结语

• 以上是eslint的规则配置，关于项目里面eslint千差万别，具体依据项目需求而定。如有错误或者不足之处，欢迎在下面评论指正，谢谢！