preface

It is recommended to write an ESLint plugin before reading this article to understand how ESLint works.

Lint and Prettier

The difference between

Where ESLint (and some other Lint tools) primarily checks code format and code quality, Prettier simply checks code format, not code quality. Code format problems usually refer to: single line code length, TAB length, Spaces, comma expressions, etc. Code quality issues are: unused variables, equal signs, global variable declarations, etc.

Cooperate with

Why do they work together?

First, ESLint did not format code automatically before the –fix parameter was introduced, whereas Prettier does format code automatically.

Second, while ESLint could validate code formats, Prettier was better at it.

ESLint and Prettier have a few problems when they work together. ESLint and Prettier format different code for some of the rules where they intersect. The problem is that when you format code using Prettier and then use ESLint, there will be warnings or errors caused by formatting.

For example, ESLint and Prettier follow the rules for using single or double quotation marks on strings:

ESLint: quotes-enforce the consistent use of either backticks, double, or single quotes, defaults to double.

// .eslintrc.js
{
  rules: {
    quotes: ["error"."double"] // This can be shortened to "error", quotes must be used, otherwise an error will be reported}}Copy the code

Prettier: Prettier. SingleQuote, default: false

// .prettierrc
{
  "singleQuote": true // Strings use single quotes
}
Copy the code

If a line of code const a = “Irene” formatted with Prettier becomes const A = ‘Irene’, then ESLint would say Strings must use doublequote; When you automatically fix the problem with ESLint –fix and then fail Prettier, you end up in an infinite loop.

The solution

The usual solution is to ban rules where Prettier is in conflict with ESLint, then use Prettier for formatting and ESLint for code verification.

  • We disable the quotes rule in.eslintrc.js and configure single quotes in.prettierrc, assuming the following configuration file:

    // .eslintrc.js
{
  rules: {
    quotes: "off"."no-unused-vars": "error".// Enable unused variable detection}}// .prettierrc
{
  "singleQuote": true
}
Copy the code

  • Create a test file called test.js.

    // test.js
const a = "irene"
Copy the code

  • Run the prettier formatting code, and the double quotes become single quotes.

    prettier --write test.js
Copy the code
    // test.js
const a = 'irene' // Double quotes become single quotes
Copy the code

  • Run ESLint to validate code.

    eslint test.js
// error  'a' is assigned a value but never used  no-unused-vars
Copy the code

Prettier & esLint The solution above requires two commands (prettier & esLint) to do formatting and validation. We want to do it simpler, preferably in one command.

So the community came up with this solution:

Purpose: Formatting and validation can be done using ESLint –fix, where Prettier is used for formatting and esLint for code validation.

Specific steps:

  • Prettier first disallow rules that conflict with Prettier in ESLint/ plugins. Create a package eslint-config-prettier that defines the banned ESLint/ plugin rule.

  • Create a plugin eslint-plugin-prettier, define the rule prettier/prettier, call Prettier, implement ESLint, run ESLint –fix Automatically formatting code according to prettier.

  • Do as follows in.eslintrc.js.

    {
  extends: [.../ / other
    "prettier".// eslint-config-prettier
  ]
  plugins: ["prettier"].// eslint-plugin-prettier
  rules: {
    "prettier/prettier": "error" // Enable the rule}}Copy the code

Eslint-config-prettier eslint-plugin-prettier eslint-config-prettier

eslint-config-prettier

Github.com/prettier/es…

Eslint-config-prettier /index.js these are rules already defined by ESLint, eslint-config-prettier/index.js does not create a new rule, It simply turns off unnecessary rules in ESLint and rules that might conflict with Prettier. Note that this configuration can only turn off rules, so it only makes sense to use it with other configurations.

As you can see from the following file, some of the closed rules are 0 and some are ‘off’. 0 indicates that the rule does not conflict with Prettier under certain options.

module.exports = {
  rules: Object.assign(
    {
      // The following rules can be used in some cases. See the README for more
      // information. (These are marked with `0` instead of `"off"` so that a
      // script can distinguish them.)
      "arrow-body-style": 0.curly: 0."lines-around-comment": 0."max-len": 0."no-confusing-arrow": 0."no-mixed-operators": 0."no-tabs": 0."no-unexpected-multiline": 0."prefer-arrow-callback": 0.quotes: 0.// The rest are rules that you never need to enable when using Prettier.
      "array-bracket-newline": "off"."array-bracket-spacing": "off"."array-element-newline": "off"."arrow-parens": "off"."arrow-spacing": "off"."block-spacing": "off". }, includeDeprecated && {// Deprecated since version 4.0.0.
      // https://github.com/eslint/eslint/pull/8286
      "indent-legacy": "off".// Deprecated since version 3.3.0.
      // https://eslint.org/docs/rules/no-spaced-func
      "no-spaced-func": "off",})};Copy the code

use

  • Install eslint-config-prettier first.

    npm install --save-dev eslint-config-prettier
Copy the code

  • Add eslint-config-prettier to the “extends” array of the.eslintrc.js file. Be sure to put it last so it has a chance to override other configurations.

    {
  extends: [.../ / other
    "prettier".// eslint-config-prettier prettier]}Copy the code

  • Eslint-config-prettier also contains @typescript eslint.js, babel.js, react.js, prettier.js, ue. The idea is to ban rules that conflict with Prettier created in the plug-in that accompanies Prettier.

    Such as: When we want to validate TS files, we need to introduce the @typescript-eslint/eslint-plugin, where Prettier /@typescript-eslint.js disables the rule where Prettier /@typescript-eslint.js does not Prettier than Prettier.

    {
  extends: [
    "plugin:@typescript-eslint/recommended".// Introduce related plug-ins
    "prettier".// Disable the rule in ESLint that conflicts with Prettier
    "prettier/@typescript-eslint" // Disable the rule that conflicts with Prettier in the plug-in]}Copy the code

    The following plug-ins all correspond to a configuration file in eslint-config-prettier

    • @typescript-eslint/eslint-plugin => prettier/@typescript-eslint.js
    • eslint-plugin-babel => prettier/babel.js
    • eslint-plugin-flowtype => prettier/flowtype.js
    • eslint-plugin-prettier => prettier/prettier.js
    • eslint-plugin-react => prettier/react.js
    • eslint-plugin-standard => prettier/standard.js
    • eslint-plugin-unicorn => prettier/unicorn.js
    • eslint-plugin-vue => prettier/vue.js

eslint-plugin-prettier

Github.com/prettier/es…

Eslint-plugin-prettier The process by which an ESLint rule prettier is used to find the differences before and after formatting and report the differences as ESLint problems It also provides different ESLint fixers for different types of differences.

Note: Eslint-plugin-Prettier doesn’t automatically install Prettier, you have to install it yourself.

Options

Prettier/Prettier rule Accepts two options, both of which are objects. The first configuration item used to pass Prettier; The second, use the usePrettierrc attribute to set whether to use the configuration item Prettier in the. Prettierrc file. Default values are as follows:

// .eslintrc.js
{
  rules: {
    "prettier/prettier": ["error", {}, {
       usePrettierrc: true.fileInfoOptions: {}}]}}Copy the code

  • The first option: a Prettier configuration item object Prettier options. Such as:

    "prettier/prettier": ["error", {
   "singleQuote": true."parser": "flow"
 }]
Copy the code

    The configuration item here overwrites the configuration item in the.prettierrc file.

    Note: Although it is possible to pass options to Prettier through an ESLint configuration file, it is not recommended because editor plug-ins such as “prettier-atom” and “prettier-vscode” read.prettierrc, Settings in ESLint are not read, resulting in an inconsistent experience.

  • The second option, an object containing the following properties:

    • UsePrettierrc: Specifies whether the Prettier configuration file is enabled.

      "prettier/prettier": ["error", {}, {
  "usePrettierrc": true
}]
Copy the code

    • FileInfoOptions: Passed to Prettier API -prettier. getFileInfo to determine whether the file needs to be formatted. For example, you can choose not to ignore files in the node_modules directory.

      "prettier/prettier": ["error", {}, {
  "fileInfoOptions": {
    "withNodeModules": true}}]Copy the code

Prettier rules

Prettier /prettier rule prettier/prettier

const prettierOptions = Object.assign(
  {},
  initialOptions, // { parser }
  prettierRcOptions, //.prettierrc option
  eslintPrettierOptions, // the first option for the 'prettier/prettier' rule in.eslintrc.js
  { filepath }
);
prettierSource = prettier.format(source, prettierOptions);
Copy the code

Prettier formatting follows. Prettierrc and “Prettier/Prettier” from the first option merge.

use

  • Prettier and eslint-plugin-prettier are installed first.

    npm install --save-dev prettier
npm install --save-dev eslint-plugin-prettier
Copy the code

  • Turn on prettier in.eslintrc.js.

    {
  extends: [.../ / other
    "prettier".// eslint-config-prettier
  ]
  plugins: ["prettier"].// eslint-plugin-prettier
  rules: {
    "prettier/prettier": "error" // Enable the rule}}Copy the code

  • Eslint plugin – prettier provides such a configuration plugin: prettier/it, specific content is as follows:

    Note: Arrow-body-style & prefer-arrow-callback when using eslint-plugin-prettier and –fix may cause an issue, so it is recommended to disable these rules.

    {
  "extends": ["prettier"]."plugins": ["prettier"]."rules": {
    "prettier/prettier": "error"."arrow-body-style": "off"."prefer-arrow-callback": "off"}}Copy the code

    So our.eslintrc.js can be simpler

    // .eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]}Copy the code

conclusion

Eslint and prettier require the following operations:

  • Eslint, prettier, eslint-config-prettier, eslint-plugin-prettier download esLint, prettier, eslint-config-prettier, eslint-plugin-prettier

    npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
Copy the code

  • Add.eslintrc.js and.prettierrc to the project root

    // .eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]}// .prettierrc
{
  "singleQuote": true
}
Copy the code

  • If ESLint is used (for example, eslint-plugin-react), “Prettier /react” needs to be disabled because it conflicts with Prettier.

    {
  "extends": [
    "plugin:prettier/recommended"."prettier/flowtype"."prettier/react"]}Copy the code

recommended

ESLint resolves package name