NPM plug-in ESLint

ESLint is a javascript code quality inspection tool, such as unused variables, undefined references, tertiary comparisons, no unnecessary parentheses, etc. ESLint has greatly improved the uniformity of code specifications for team collaboration, as well as individual code quality, and is favored by Web developers. But its numerous configuration parameters, syntax rules, are just as confusing. Fortunately, ESLint plug-ins are built into the scaffolding of every web framework, and like ESLint, developers can enjoy the team and individual benefits of ESLint without much manual configuration. But considering that not all frameworks are built in and there are a lot of friends like me who are a bit of a trouble-maker, we still need to check them out.

So without further ado, let’s get right to the code.

NPM ESLint command line

mkdir eslint-app && cdNPM init // initializes NPM touch index.js // Creates an entry file NPM I eslint -d // installs esLint dependenciesCopy the code

We create a new directory and install ESLint, then we write code in index.js

const hello = "hello";
Copy the code

Add a check script to the scripts option of package.json to indicate that we are going to ESLint all js files in the directory

"scripts": {
  "lint": "eslint ."
}
Copy the code

Then we run NPM run Lint, and if anything, we should get an error saying we need an ESLint configuration file

Json,eslintrc.js,.eslintrc.yaml, or even in package.json. I used.eslintrc.json. The following configuration code was added

{
  "env": { // Global environment variables
    "browser": true.// Browser environment
  },
  "extends": "eslint:recommended".// Inherit the esLint default configuration
  "parserOptions": { // Specify the javaScript language type and style
    "sourceType": "module" // Set the import mode to module import
  },
  "rules": { // Configure rules
   "no-unused-vars": 1.// Warning does not allow unused variables
   "semi": [1."always"].// Warning enforces a semicolon at the end of a sentence}}Copy the code

.eslintrc is deprecated and can be completely replaced with.eslintrc.json

Now that the configuration file is created, we continue with NPM run Lint. If your index.js code looks like what I did above, the terminal should now display a warning telling us that index.js defines a hello variable but does not use it. So we have completed the first step of verification

You can use ESLint’s formatting feature, which automatically formats some of your basic syntax problems. Add a formatting script to package.json scripts. As you can see, the difference from Lint is that the –fix argument is added

"scripts": {
  "format": "eslint . --fix"
},
Copy the code

Then we remove the semicolon from the first line of index.js, execute NPM run format, and if we look back at index.js, we should see that the semicolon is automatically added to the end of the sentence

eslint-webpack-plugin(eslint-loader)

Since WebPack 5, eslint-Loader is no longer recommended by Webpack, see github.com/webpack-con…

So how does ESLint integrate with existing projects? And in a real project, wouldn’t it be a hassle to have to manually execute Lint every time we see our syntax errors?

This is where the eslint-webpack-plugin comes in handy. Eslint-webpack-plugin is a webpack plugin that checks our JS code in real time during project compilation. Let’s start by manually setting up a WebPack environment and continue to install dependencies on this project

npm i webpack-cli webpack webpack-dev-server webpack-html-plugin eslint-webpack-plugin -D
Copy the code

Add a startup script to package.json scripts

"scripts": {
  "start": "webpack serve"
}
Copy the code

Add the webpack.config.js configuration file to the root directory

const HtmlWebpackPlugin = require('html-webpack-plugin')
const EslintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
   mode: 'development'.entry: './index.js'.devtool: 'inline-cheap-module-source-map'.plugins: [
       new HtmlWebpackPlugin(),
       new EslintWebpackPlugin()
   ],
   devServer: {
       port: 9000}}Copy the code

  • Manually modify index.js to remove the semicolon at the end of the sentence, then run NPM start, and observe the console to find a warning. Open the browser, enter the website http://localhost:9000/, press F12, and the browser console also appears a warning

  • Add a semicolon to index.js manually, run NPM start, and watch the console to see that the warning disappears, and watch the browser console to see that the warning also disappears

If you also want to support save-and-auto-format, just pass the {fix: true} option in the EslintWebpackPlugin of the WebPack configuration file

NPM plug-in Perttier

What is Prettier? What does ESLint have to do with that?

Where Prettier is used to format code, ESLint is used for code quality inspection, where Prettier is used to format code. No, ESLint only formats JS/TS files, while Prettier supports multiple files

  • JavaScript/TypeScript
  • CSS/Less/SCSS
  • HTML
  • JSON/YAML/GraphQL
  • Markdown
  • Vue/React/Angular

Prettier’s own specification tends to standardize or unify individual/team code styles, such as maximum line length, single or double quotation marks, equal Spaces, TAB or space, etc. Working with ESLint would be an added advantage for Prettier

NPM plug-in eslint – plugin – prettier

Eslint-plugin-prettier is an ESLint plugin provided by the Prettier ecosystem to report errors to ESLint

npm i prettier eslint-plugin-prettier eslint-config-prettier
Copy the code

Eslint-config-prettier Uses the default prettier configuration recommended by Prettier and disables formatting for ESLint to prevent prettier from automatically formatting for ESLint

Add the.prettierrc configuration file Prettier in the root directory of the project

{
    "singleQuote": true.// Enforce single quotes
    "semi": true // Enforce a semicolon at the end of a sentence
  }
  
Copy the code

Modified index. Js

const hello = "hello"
console.log(hello)
Copy the code

Modify. Eslintrc. Json

{
    "env": {
        "browser": true
    },
    "extends": ["plugin:prettier/recommended"].// Prettier is recommended
    "parserOptions": {
        "ecmaVersion": 12."sourceType": "module"}}Copy the code

Run NPM start again

  • If configuredEslintWebpackPlugin 的 fix: trueOption, you will see that the double quotes have become single quotes, and the semicolon is automatically added
  • Otherwise, it appearseslint prettierError: double quotation marks were used incorrectly and no semicolon was added

ESlint 与 PrettierAs a result ofESlintIts automatic formatting function is not perfect,PrettierInstead of aESlintFormatting ability, utilizedESlintDetection and prompt

The plugin for VS Code ESLint/Prettier

What else seems to be missing, the above code is prompted during the compilation of the project, finally write a long string of code, found n syntax warnings and errors, suddenly burst your mind

VS Code ESLint plugin

Go back to VS Code, press CTRL + Shift + X(MAC: Command + Shift + X), go to the plugin store, install the ESLint plugin and restore the index.js Code to the following

const hello = "hello"

console.log(hello)
Copy the code

Thankfully, the editor will alert you to errors and warnings, no longer at compile time, but at Code writing, which is what the VS Code ESLint plugin is capable of.

VS Code ESLint plugins to run require the local project’s ESLint-related plugins and configurations to be present (dependencies, configuration files), but not necessarily compiled. For example, the eslint-loader or eslint-webpack-plugin can not be used in webpack

The VS Code Prettier plugin

When NPM Prettier is used for automatic formatting, it takes a long time to save because javascript has to be compiled before Prettier is used. Install the Prettier plug-in in the plug-in store using the same method described above

Create the.vscode directory in the root directory of your project, go to the directory to create the.settings.json file, and add the following code

{
  "editor.defaultFormatter": "esbenp.prettier-vscode".// Use prettier as a formatting tool by default
  "editor.formatOnSave": true // Format when saving code
}
Copy the code

Go back to index.js, save, and you’ll see that the code has been automatically formatted. Change the format script of package.josn to

"format": "prettier --write ."
Copy the code

Every time the NPM format command is executed, all the files in the project in the format supported by Prettier (including but not limited to JS and TS) are formatted, often used for pre-commit detection and formatting of Git hooks

At this point, VS Code formatting conflicts with NPM formatting, so you can remove the eslint-webpack-plugin completely. The conflict is resolved and the compilation efficiency is greatly improved, leaving detection and formatting entirely to the editor. This is also a popular practice in most frameworks today, otherwise ESLint in WebPack would have to parse the entire code once, especially affecting compilation speed when the project is large, as well as the console’s barrage of warnings and errors affecting the developer experience

conclusion

  1. Syntax checking at compile time for NPM ESLint code
  2. NPM Prettier automatic formatting at compile time
  3. The VS Code ESLint editor provides instant syntax checking and hints for developing-time Code
  4. The VS Code Prettier editor formats Code as it is being developed in real time