项目质量监测（二）02-Lint工具之ESLint——起步与安装 & ESLint初始化-.eslintrc.js文件 & 项目.eslintignore-忽略文件

项目质量监测（二）02-Lint工具之ESLint——起步与安装 & ESLint初始化-.eslintrc.js文件 & 项目.eslintignore-忽略文件

起步与安装

1. 在项目中去使用，

   1.1、新建文件夹DEMO，在其内打开命令行窗口

   // npm init 指令会在项目根目录下生成 package.json 文件。
   npm init
   
   // --save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。
   npm install eslint --save-dev
   

   或

   npm init -y   //初始化npm项目
   
   // 局部安装eslint
   npm install eslint --save-dev
   //或
   npm install eslint -D
   

   • 使用npm run

   1.2、在生成的package.json文件中，替换原文件

   新增package.json 脚本，或者使用 npx命令

   "scripts": {
       // "test": "echo \"Error: no test specified\" && exit 1"  //默认生成的文件
       "lint": "eslint src",  //"lint": "eslint app.js",
       "lint:create": "eslint --init"
   }
   

   然后使用run命令：

   npm run lint
   

   • 直接使用npx命令：

   1.3、执行eslint

   npx eslint --init  //或 npx eslint
   
   // 或者
   ./node_modules/.bin/eslint --init
   

2. 在全局使用

   npm install -g eslint  //不推荐全局安装，eslint在不断更新；单独安装跟着项目走，能使用最新特性
   

ESLint初始化

配置方法使用 eslint --init方法

➜ npx eslint --init
? How would you like to use ESLint? (Use arrow keys)
  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? (Use arrow keys)  //项目中会使用什么模块
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these 
  
// 这里可以针对你的开发项目进行配置
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these   //不使用任何框架，单纯练习

// 可以配置代码运行的地方，是浏览器还是Node环境？
? Where does your code run? 
❯◉ Browser  //浏览器环境
 ◉ Node  // node环境
 
// 最先在哪里缓存
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript   //会生成.eslintrc.js文件
  YAML 
  JSON 

// 成功创建了配置文件
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/itheima/Downloads/Demo

配置文件.eslintrc.js：

废弃的用法：.eslintrc，eslint使用配置的顺序：.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

.eslintrc.js文件：

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

再来看看，yaml文件配置：

env:
  browser: true
  es6: true
  node: true
extends: 'eslint:recommended'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules: {}

该文件导出一个对象，对象包含属性 env、extends、parserOptions、plugins、rules 五个属性：

• env：指定脚本的运行环境。每种环境都有一组特定的预定义全局变量，（如：nodejs，browser，commonjs等）中。

• parserOptions：用于指定想要支持的JavaScript语言选项

  • ecmaVersion - 默认设置为3，5（默认）， 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

  • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

  • ecmaFeatures
    

    - 这是个对象，表示你想使用的额外的语言特性:

    • globalReturn - 允许在全局作用域下使用 return 语句
    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 启用 JSX

• globals：执行代码时脚步需要访问的额外全局变量。

• rules：开启某些规则，也可以设置规则的等级。

• extends: 对默认规则进行扩展，可以使用Airbnb，或者Standard规则。

.eslintignore-项目忽略文件

可以在项目根目录创建，告诉ESLint忽略某些文件或者目录。相当于.gitignore都是纯文本文件。
例如

# 注释，忽略文件node_modules**/.jsbuild

常见的eslintignore内容：

node_modules/*
**/node_modules/*
dist/*
/build/**
/coverage/**
/docs/**
/jsdoc/**
/templates/**
/tests/bench/**
/tests/fixtures/**
/tests/performance/**
/tmp/**
/lib/rules/utils/unicode/is-combining-character.js
test.js
!.eslintrc.js