eslint项目配置笔记 js检测 ts检测配置

安装

项目实操

1、安装eslint
   npm install eslint --save-dev
2、 package.json 
	"scripts": {
	    "test": "react-scripts test --env=jsdom",
	    +"lint": "eslint src",
	    +"lint:create": "eslint --init"
	}
3、执行
	npm run lint:create
	

配置

设置 package.json 文件

打开 package.json 文件，修改 script 属性如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src",
    "lint:create": "eslint --init"
}

• script 属性的意思是脚本，使用方法是在 cmd 窗口中输入 npm run 指令 的形式，如：npm run lint:create
• “lint:create”: “eslint --init” 这个脚本是为了生成 .eslintrc.js 文件，在介绍 Lint 的时候说到 Lint 应该提供编码规范，规范写在哪里，就写在这个文件，所以我们需要创建它；
• “lint”: “eslint src” 在介绍 Lint 的时候也说到 Lint 应该提供自动校验代码的程序，这个脚本是让 Lint 自动检验 src 目录下所有的 .js 文件。

创建 .eslint.js 文件

$ npm run lint:create

> 20170811@0.1.0 lint:create D:\code\test\20170811
> eslint --init

? How would you like to configure ESLint? Answer questions about your style // 以问答的形式创建配置文件
? Are you using ECMAScript 6 features? Yes      // 是否校验 Es6 语法
? Are you using ES6 modules? Yes                // 是否校验 Es6 模块语法
? Where will your code run? Browser             // 代码运行环境，Browser 指浏览器
? Do you use CommonJS? Yes                      // 是否校验 CommonJs 语法
? Do you use JSX? Yes                           // 是否校验 JSX 语法
? Do you use React? Yes                         // 是否校验 React 语法
? What style of indentation do you use? Tabs    // 首行空白选择 Tab 键还是 Space
? What quotes do you use for strings? Double    // 字符串使用单引号 'string' 还是双引号 "string"
? What line endings do you use? Windows         // 操作系统
? Do you require semicolons? Yes                // 每行代码结尾是否校验加分号 ;
? What format do you want your config file to be in? JavaScript     // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest   // 因为要校验 Reac 语法，所以这里需要下载一个 React 语法规则的包

创建完成后根目录下应该会出现.eslintrc.js 文件

设置 --fix 参数

打开 package.json 文件，修改 script 属性如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
}

说明：这里给 “lint”: “eslint src --fix”, 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。

env、parserOptions、plugins、

extends

值为 “eslint:recommended” 的 extends 属性启用一系列核心规则，这些规则是经过前人验证的最佳实践（所谓最佳实践，就是大家伙都觉得应该遵循的编码规范），想知道最佳实践具体有哪些编码规范，可以在 eslint规则表eslint规则表 中查看被标记为 √ 的规则项。

rules
常用的几个规则

"quotes": [1, "single"],            # 单引号
"quote-props":[2, "as-needed"],     # 双引号自动变单引号
"semi": [2, "never"],               # 一行结尾不要写分号
"comma-dangle": [1,"always-multiline"]  # 对象或数组多行写法时，最后一个值加逗号

提交校验

使用的工具

• husky。一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。
• prettier。 一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。
• eslint。代码检查工具。eslint也可以负责一部分代码格式检查的工作，但是prettier已经做的很好了，所以我便没用eslint的代码格式检查，只让其负责代码错误检查
• lint-staged。在你提交的文件中，执行自定义的指令。don’t let ? slip into your codebase. — lint-staged

安装eslint

npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

安装prettier

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

安装husky，lint-staged

npm i -D husky lint-staged pretty-quick

prettier配置

• prettier 代码格式化核心
• eslint-plugin-prettier 插件，可以让eslint使用prettier规则进行检查，并使用–fix选项。像之前的格式不对时，eslint提示的红线。
• eslint-config-prettier 插件，之前说了eslint也会检查代码的格式，这个插件就是关闭所有不必要或可能跟prettier产生冲突的规则。

在eslintrc.json添加如下配置：

{
 "extends": ["airbnb", "plugin:prettier/recommended"],
}

prettier配置文件

prittier配置文件支持很多种，具体可以看这里。我使用的是.prettierrrc格式，因为试过其他格式，但是只有.prettierrrc，vscode才可以识别。 生成配置可以直接用官网上的try it out,左下角有导出配置。下面这份配置基本上是风格要求的全部了，具体可按照个人爱好进行配置。

{
  "printWidth": 120, // 一行最大多少字符
  "tabWidth": 2, // tab占用的字符数
  "useTabs": false, // 是否使用tab代替空格
  "semi": true, // 是否每句后都加分号
  "singleQuote": true, // 是否使用单引号
  "jsxSingleQuote": false, // jsx是否使用单引号
  "trailingComma": "all", // 数组尾逗号。
  "bracketSpacing": false, // {foo: xx}还是{ foo: xx }
  "jsxBracketSameLine": false, //看官网
  "arrowParens": "always" //剪头函数参数是否使用（）
}

eslint配置

{
  "extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "parser": "babel-eslint",// 解决ES6 improt会报错
  "env": { // eg如果不配置browser，window就会被eslint报undefined的错
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "class-methods-use-this": 0,
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  }
}

husky钩子pre-commit配置

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,txs,ts,js,json,css,md}": [
      "prettier --write", // 先使用prettier进行格式化
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  },

husky会在你提交前，调用pre-commit钩子，执行lint-staged，如果代码不符合prettier配置的规则，会进行格式化；然后再用eslint的规则进行检查，如果有不符合规则且无法自动修复的，就会停止此次提交。如果都通过了就会讲代码添加到stage，然后commit。

typescript & eslint

安装

yarn add eslint -D
配置
npx eslint --init