2019-01-16

ESlint is a code quality tool
it's job is to scan your project files and point out potential issues whether
they're non critical issues like formatting or whether they actually are critical
issues like trying to reference a function that does not exist.

官网体验

image.png

各种不同级别的规则设置

image.png

安装

First step

install eslint
it's a npm module, so make sure you have node installed .

// check node
node -v
// install globally
npm install -g eslint
// check eslint
eslint --version

新建一个空项目，只有一个app.js,代码如下：

var foo = bar;

在项目下新建 .eslintrc 文件。这是eslint的配置文件，是一个json格式的文件

{}

开始使用eslint

eslint app.js

nothing happened. 因为我们没有做任何配置。eslint 只是一个工具，我们通过规则告诉它该怎么去做事情。下面给.eslintrc 配置一条规则：

{
    "extends": "eslint:recommended"
}

再次运行 eslint app.js

image.png

修改app.js 代码如下：

var bar =10;
var foo = bar +2;
document.write(foo);

运行eslint app.js

image.png

修改 .eslintrc 文件

{
    "extends": "eslint:recommended",
    "parserOptions": {
      "ecmaVersion": 6
    },
    "env": {
        "node":true,
        "browser": true,
        "es6": true
    }
}

无错误

怎么写配置文件？https://eslint.org/docs/user-guide/configuring

image.png

Setup ESlint to work with our editor

what you have to do is install a plugin!!

image.png

插件会和配置文件.eslintrc 一起工作。
需要重启编辑器,重启后，可以看到编辑器开始提示了

image.png

real world set of rules

install a third party eslint configuration
eslint:recommended comes built in.

https://github.com/airbnb/javascript

image.png

要使用第三方配置，需要项目支持 npm 包管理

npm init
// 很长的一个安装命令
 npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

安装完airbnb配置包，修改 .eslintrc文件来使用新的配置：

{
    "extends": "airbnb",
    "parserOptions": {
      "ecmaVersion": 6
    },
    "env": {
        "node":true,
        "browser": true,
        "es6": true
    }
}

看代码，之前正确的代码因为换了规则，开始出现新的错误。

image.png

说明几条规则

comma-dangle

image.png image.png image.png

支持JSX

image.png

npm install --save react react-dom

image.png
https://mead.io/eslint/

Prettier

image.png

let eslint to run prettier for javascript files
and then let the prettier extension format the rest of files.

// install prettier relative
npm install prettier eslint-config-prettier eslint-plugin-prettier -dev

// in .eslintrc file , add prettier to extends ,this will turn off any 
// eslint rules that may be in conflict with prettier 
// and then we'll add the prettier / prettier rule that comes with 
// the prettier plugin,this will run the prettier tool as an  eslint 
// rule and reports differences as issues as it  turns out this is // a pretty common setup
{
    "extends": ["airbnb","prettier"],
    "parserOptions": {
      "ecmaVersion": 6
    },
    "env": {
        "node":true,
        "browser": true,
        "es6": true
    },
    "rules":{
        "prettier/prettier":"error",
        "comma-dangle":"off"
    },
    "plugins": ["prettier"]
}

//so there is a shothand syntax of just extending //plugin:prettier slash recommend:
{
  "extends":["airbnb","plugin:prettier/recommended"]
}

before we test, there are some VSCODE user settings that we need to tweak a quick. a quick navigate to your user settings is command-comma on a Mac

https://code.visualstudio.com/docs/getstarted/settings
怎么直接修改文件？
VSCODE 下运行全局命令： shift + command +p

image.png image.png

我们需要修改一些配置：

image.png

this will allow us to format with prettier since we have it installed every time we save a file. however we do want to turn off the prettier extension for
javascript files since we setup eslint to handle that for us.
then we'll also turn on eslint.autoFixOnSave as well to fix any issues that it can if they're found.
we'll also tell eslint to always show it's status to keep us informed .next we'll explicitly ask prettier to disabled itself for Javascript files but we do want to keep it enalbed for all other languages such as CSS markdown and others.
lastly I like to have my files auto save when the focus has changed.

git tools

npm i husky lint-staged -D

this tools will allow us to integrate into git hooks and run prettier only against files that have been staged in git instead of running prettier against your whole project every time.

in package.json file,add a new npm script ,called precommit.
this is one of the special husky hooks that lets us execute a script right before our code is committed .

// package.json
...
"scripts":{
...
"precommit": "lint-staged"
// this is one of the special husky hooks that let us execute  a script right before
//our code is commited. in this case ,we will say that we want lint staged to run 
//let's configured it now.
}
...
"lint-staged":{
  "src/**/*.{js,jsx,json,css}":[
   "prettier --write",
   "git add"
 ]
}
//we will tell lint stage if any files are staged that hanppen to match these types
//in our source directory,then run prettier --write,and then add them back to git.

quick way

npm i pretty-quick -D
//in package.json file
remove the lint-stage configure,just do:
"script":{
...
"precommit":"pretty-quick --staged"
}