How to install ESLint plugin in Visual Studio Code (Prettier integration)

How to install ESLint plugin in Visual Studio Code (Prettier integration)

How to install ESLint in Visual Studio Code. This ESLint performs syntax checking.

Ctrl + Shift + x

Press to display the extension.

Type “ESLint” and you will see the following

Click on “ESLint” at the top to begin installation.

When you see “Reload,” click “Reload.”

When the above window appears, click “Reload Window.

Check that the following three lines have been added to settings.json. If they are added, linter will run when saving.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

If the reload window does not open and the above three lines have not been added, add the three lines.

This completes the installation of ESLint.

setup file

Like checkstyle in Eclipse, ESLint also requires a configuration file.

GitHub - felixge/node-style-guide: A guide for styling your node.js / JavaScript code. Fork & adjust to your taste.
A guide for styling your node.js / JavaScript code. Fork & adjust to your taste. - GitHub - felixge/node-style-guide: A ...

The above “.eslintrc” is recommended.

Place it as .eslintrc.json directly under your project and it should reflect.

If not, type .node_modules.bineslint --init.

C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init
? How would you like to configure ESLint?
  Answer questions about your style
> Use a popular style guide
Inspect your JavaScript file(s)

Selecting “Use a popular style guide” will lead to the following questions

C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Google
  Airbnb
  Standard

Select “Google” and you will be asked the following question

C:UserstakahashiDocumentsvscodeapps>.node_modules.bineslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in?
JavaScript
YAML
> JSON

Selecting “JSON” will install the “eslint-config-google” package.

You will also see the following message

Successfully created .eslintrc.json file in C:UserstakahashiDocumentsvscodeapps

Replacing this with the above file will change the rules for ESLint.

Avoiding ESLint warnings

At the end of the line with the warning, enter the following

// eslint-disable-line

ESLint6.8.0

It is assumed that VSCode’s ESLint plugin is installed.

The following three lines should be added to VSCode’s settings.json. This will cause linter to run when saving the js file.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Install the latest version of ESLint. *As of 01/18/2020

npm i -D eslint

The following changes were made in ESLint 6.8.0

C:\Users\takahashi\Documents\vscode\linter>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

Select “To check syntax and find problems.

C:\Users\takahashi\Documents\vscode\linter>npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use?
  JavaScript modules (import/export)
> CommonJS (require/exports)
  None of these

This time, select “CommonJS”.

C:\Users\takahashi\Documents\vscode\linter>npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use?
  React
  Vue.js
> None of these

Select “None of these.”

C:\Users\takahashi\Documents\vscode\linter>npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? (y/N) N

Enter “N”.

C:\Users\takahashi\Documents\vscode\linter>npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run?
 ( ) Browser
>(*) Node

Select “Node” only. Press space to select a choice.

C:\Users\takahashi\Documents\vscode\linter>npx eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Node
? What format do you want your config file to be in?
  JavaScript
  YAML
> JSON

Select “JSON.”

If you see “Successfully created .eslintrc.json file in C:\Users\takahashi\Documents\vscode\linter”, the .eslintrc.json file is created.

You may prepare the .eslintrc.json file on your own without creating it with the init command.

The .eslintrc.json file is as follows

{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
  }
}

The default is no rules, so we will write rules in the value of this rules key.

My environment looks like this for now.

"rules": {
  "indent": ["error", 2], // indent to 2
  "quotes": ["error", "single"], // Prohibition of double quotes
  "semi": ["error", "never"], // Prohibition of semicolons
  "block-spacing": "error", // Insert single-byte spaces in {{}}.
  "eol-last": ["error", "always"], // Add one line to the last line
  "no-var": "error", // Prohibit the use of var
  "max-params": ["error", 3], // Error with 4 or more arguments
  "eqeqeq": ["error", "always"], // Requires strict use of comparison operators === and ! Require strict use of === and !
  // "no-magic-numbers": ["error", { "enforceConst": true,"ignoreArrayIndexes": true }],
  "yoda": "error", // Yoda notation prohibition
  "no-shadow": "error", // Shadowing prohibited
  "no-dupe-args": "error", // Function duplicate argument prohibition
  "no-unreachable": "error" // Check for unreachable codes
}

ESLint (Static Analysis) + Prettier (Formatter) Linkage

Install the modules required for ESLint and Prettier integration.

npm i -D eslint-plugin-prettier eslint-config-prettier prettier
モジュール バージョン
ESLint 6.8.0
eslint-plugin-prettier 6.9.0
eslint-config-prettier 3.1.2
prettier 1.19.1

Prettier and ESLint will be linked.

Rewrite the .eslintrc.json file as follows

{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended" // Run Prettier on ESLint with eslint-plugin-prettier and eslint-config-prettier enabled
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [ // Prettier rule
      "error",
      {
        "printWidth": 80,
        "tabWidth": 2,
        "singleQuote": true,
        "semi": false,
        "trailingComma": "none", // es5
        "bracketSpacing": true,
        "arrowParens": "avoid" // () can be omitted if the arrow function takes only one argument. If always is specified, it cannot be omitted.
      }
    ],
    // ESLintルール
    "indent": ["error", 2],
    "space-infix-ops": "error",
    "comma-spacing": ["error", { "before": false, "after": true }],
    "brace-style": "error",
    "quotes": ["error", "single"],
    "semi": ["error", "never"],
    "block-spacing": "error",
    "eol-last": ["error", "always"],
    "no-var": "error",
    "max-params": ["error", 3],
    "eqeqeq": ["error", "always"],
    "yoda": "error",
    "no-shadow": "error",
    "no-dupe-args": "error",
    "no-unreachable": "error" 
  }
}

The .eslintrc.json file can be downloaded from

.eslintignore

You can place the .eslintignore file in the same location as the .eslintrc.json file to specify files not subject to linter.

The following is a source under the TEST distribution where linter does not work.

/**/node_modules/**
test/*

Reference Site:JavaScript Standard StyleESLintPrettier

plato to output a report of static analysis

You may be asked to output a static analysis report as a deliverable.

If you install plato, you can output the report in html format.

npm i --save-dev plato
npx plato -e .eslintrc.json -r -d reportDir -t "Hoge Project" src

The report is output under the reportDir directory with the file under src as the target source.

  • Lint with -e option. (The specified file is json)
  • Recursive analysis with the -r option.
  • The -d option specifies the output destination. In this case, it is reportDir.
  • The -t option can be used to specify a title for the output.

The last src is the folder for static analysis.

コメント

タイトルとURLをコピーしました