In this article, we will explore vscode prettier and eslint in vscode and the relationship between their corresponding configuration files in the project. Finally, we will discuss how vscode eslint and eslint-loader work together. The.vscode/settings.json function is also mentioned.

This article assumes you know a little about vscode, eslint, prettier, webpack. I hope this article will be helpful to you and help you build projects in the future.

If there is a mistake, do not hesitate to advise.

Example Initialize the test project to create folders eslint-prettier-test and eslint-prettier-test/index.js.

Vscode prettier The vscode plug-in prettier is installed

Use vscode settings.json to set vscode as the default formatting tool prettier. Take JavaScript for example.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
Copy the code

For example, adding a semicolon to the end of a JavaScript statement opens the VScode configuration file settings.json to configure the prettier plug-in.

{
    "prettier.semi": true,
}
Copy the code

Formatting code in vscode at this point automatically adds semicolons to JavaScript statements.

Prettierrc and then create the.prettierrc configuration file in our project root. PNG Writes the configuration in. Prettierrc.

{
    "semi": false
}
Copy the code

This configuration item does not add semicolons to JavaScript statements, as opposed to Settings. Json above. Seeing is believing, we format the JS file again.

Since giFs play in a loop, a quick explanation. When I press vscode format shortcut, the semicolon disappears.

The.prettierrc configuration file at the root of a project affects the prettier plug-in of VScode and takes precedence over prettier in vscode settings.json.

What can we do with that? When you install vscode prettier, you should set the default formatting tool for vscode as prettier and do the desired prettier configuration inside vscode. This is true for the configuration of projects where Prettier is not used. Prettierrc when you include the. Prettierrc configuration file in your project, the. Prettierrc does not work, the prettier plug-in in vscode does not work.

Vscode ESLint EsLint can be configured the same way. But to get eslint tips, you don’t just need to install the eslint plug-in in vscode.

You also need to create an.eslintrc.js file in the project root directory for vscode to throw the prompt. When you delete the **.eslintrc.js file, the prompt will disappear. For example, we write the following configuration to.eslintrc.js in the project root directory.

module.exports = {
    env: {
        es6: true,
    },
    rules: {
        'no-console': 'warn',
    },
};
Copy the code

Allows es6 syntax to throw warnings using console

Vscode throws a warning when we use console as a rule.

.vscode You can create a.vscode/settings.json file in any project root directory. This json file can be configured with the same Settings as in vscode. Here’s an example.

{
    "editor.formatOnSave": true,
}
Copy the code

This configuration enables vscode to automatically format code when it is saved. This option can also be configured in vsCode’s internal configuration file settings.json. .vscode/settings.json overrides the configuration in vscode’s internal configuration file settings.json, which is reasonable.

So what are the benefits of this? When a project requires multiple collaborators, you can configure.vscode/settings.json in the root directory of the project to share the configuration.

Can we share our vscode plugin configuration with others in.vscode/settings.json? Of course you can. Don’t forget that.vscode/settings.json allows you to configure Settings. Json within VScode. Often you don’t have to. Examples like prettier and eslint give us a separate configuration file to put in the project root, which vscode automatically reads and validates (provided vscode has the plugin installed).

We can open up a large open source project and see how they do it. Examples include the cross-end framework Taro. PNG They put the prettier and esLint configurations in separate configuration files (.prettierrc and.eslintrc.js in the figure). Open.vscode/setting.json to check it out.

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "jest.autoEnable": false,
  "typescript.tsdk": "node_modules/typescript/lib"
}
Copy the code

You do not need to put validation rules in.vscode/settings.json. The eslint.validate configuration specifies the type of language that the ESLint plugin validates. VSCode will correctly highlight incorrect syntax in the code editor after adding the corresponding language. If you have the eslint plugin installed in vscode, the default configuration includes some common languages, so you don’t need to configure them separately.

Just remember:.vscode/settings.json only works with Settings.

eslint-loader

If you are building your project using WebPack, you should use eslint-Loader. You can configure verification rules in loader. This is not the case above, when the project runs locally (usually in production, esLint-Loader throws are blocked). Eslint-loader will throw an error or warning on the console when your code does not conform to the validation rules.

Install the ESLint-Loader in the project you built at the beginning of this article. If you use esLint-Loader, you also need to install ESLint.

npm init -y && npm i webpack webpack-cli eslint eslint-loader -D
Copy the code

Once installed, let’s look at the dependencies for the current project in package.json.

"DevDependencies" : {" eslint ":" ^ 7.14.0 ", "eslint - loader" : "^ 4.0.2", "webpack" : "^ 5.9.0", "webpack - cli" : "^ 4.2.0"}Copy the code

A bit of configuration is required to use eslint-Loader. Create webpack.config.js in the project root directory.

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // eslint options (if necessary)
                },
            },
        ],
    },
};
Copy the code

To make this simple example work, we also need to put the index.js file in the project in SRC, since the wepack default entry file is SRC /index.js. In order to avoid unnecessary webpack configuration, Create the SRC folder directly and move index.js in.

image.png

Don’t forget that.eslintrc.js is configured with a validation rule that applies to the vscode eslint plugin. At this point, the contents of index.js have not changed, and the warning is still being thrown.

Next we run the command webpack from the console. Webpack will pack SRC /index.js into dist/main.js.

As you might expect, eslint-Loader throws a warning for us in the console that we configured in.eslintrc.js to throw when using console. So.eslintrc.js works not only with eslint plugins in vscode, but also with eslint-loader.

If you’re still in doubt, comment out the eslint-loader in wepack.config.js we’ve configured above.

module.exports = {
    // module: {
    //     rules: [
    //         {
    //             test: /\.js$/,
    //             exclude: /node_modules/,
    //             loader: 'eslint-loader',
    //             options: {
    //                 // eslint options (if necessary)
    //             },
    //         },
    //     ],
    // },
};
Copy the code

Running WebPack again, even if you don’t see the results, you should know that webpack doesn’t throw any errors during the packaging process.

Summary through loader, vscode plug-in and plug-in configuration, get through the syntax check and formatting of the whole development link.