RN projects use ES Lint

1, before we start, first look at the official website and materials: Eslint.org/ Official Getting Started [eslint.org/docs/user-g… Guide/Getting – Started) Official rule description eslint.org/docs/rules/ Configure the rule description Blog.csdn.net/Cy_Shay/art…

Eslint can be installed globally or as a local project (recommended).

npm install eslint --save-dev
Copy the code

3, initialize ES Lint, which executes the following directive

    npx eslint --init
Copy the code

Then follow the prompts step by step to suggest Airbnb-style Settings.

To start the check, NPX means to run node_modules. I specified to check./ SRC /app.js

npx eslint ./src/app.js
Copy the code

If you encounter some character errors, etc. You can use auto – fix some space indentation warnings.

npx eslint ./src/app.js -- fix  
Copy the code

Lint sets rules from configuration files, so we create a new.eslintrc.js file and modify it as follows:.eslintrc.js

module.exports = {
"extends": "airbnb",
"rules": {
    "import/no-named-as-default": 0,
    "import/no-named-as-default-member":0
  }
};
Copy the code

There are also rules to set, such as support for arrow expressions and so on. A) Added the plugin babel-eslint, which allows ES Lint to recognize ES6 syntax

yarn add babel-eslint --dev
Copy the code

B) modify. Eslintrc. Js

  "parser": "babel-eslint",
Copy the code

View the report. Sometimes we need to view the HTML text output report, using the following command.

./src -o xxxx.eslint.report.html -f html
Copy the code

5,

A) Create a file

 .eslintignore
Copy the code

B) Example, add one to the.eslintignore file

  **/node_modules/**
Copy the code

Or a file can turn off ESLint checking and add a declaration to the file header

/* eslint-disable */
Copy the code

A line of JS code turns esLint checking off

// eslint-disable-next-line
alert('e')
Copy the code

Added configuration: eslint-plugin-react a) Execute the command

yarn add eslint-plugin-react –dev

B) Configuration modification.eslintrc.js

{"plugins": ["react"]} Enable JSX support (With ESLint 2+) {"parserOptions": {"ecmaFeatures": {" JSX ": true}}} Enable the rules that you would like to use. { "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error", }Copy the code

Prettier, a plug-in for Prettier, is a code formatting tool that can unify an individual or team’s code style.

Es Lint configuration under Jenkins: Setp 1 Configure git to pull source Setp. 2. Configure build time to run shell

# # to check the version of the node node - v installation js module yarn install # remove old rm - rf. / build/eslint. Report. * HTML | | true # prepare the report name cur_dateTime="`date +%Y%m%d%H%m`"Copy the code

Setp 3. Configure the archive after the build: build/eslint.report.*.html

6. Reference:

Eslint.org/ www.jianshu.com/p/1d66a1046… Blog.csdn.net/Cy_Shay/art… ReactNative how to configure ESLint, Prettier, pre-commit Hook blog.csdn.net/Ctrl_S/arti… This article introduces rule clearly www.php.cn/js-tutorial…