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.
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
.eslintrc.json
.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 Style、ESLint、Prettier
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.
コメント