Eslint formats code

This article uses the Vue project as a demonstration.

To create a project using vue-cli, select ESlint. After downloading the dependencies, open the project with VSCode.

To install the plugin ESLint, go to File -> Preference-> Settings (File -> Options -> Settings if you have the plugin installed), search ESLint and click Edit in setting.json

Add the following options to the configuration file

    "editor.codeActionsOnSave": {
        "source.fixAll": true,},Copy the code

Also make sure that the status bar ESlint in the lower right corner of VSCode is working.

Once configured, VSCode will validate and format the code according to the rules of your.eslintrc.js file under your current Vue project.

TypeScript

Download the plugin

npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
Copy the code

In the.eslintrc configuration file, add the following two configuration items:

"parser": "@typescript-eslint/parser"."plugins": [
    "@typescript-eslint"].Copy the code

Add the following configuration items to the scripts option of the package.json file in the root directory:

"scripts": {
  "lint": "eslint --ext .js,.ts,.tsx test/ src/",},Copy the code

Test/SRC/is the directory you want to verify. After the modification, ts files can now be automatically formatted.

If you create projects using vue-CLI and want to format TypeScript code, add or modify the following items in the.eslintrc.js file:

parser: 'vue-eslint-parser'.plugins: [
    '@typescript-eslint',].parserOptions: {
    parser: '@typescript-eslint/parser'.ecmaVersion: 2020,},Copy the code

This will format the.js.ts.vue file.

Stylelint Formatting code

Download the dependent

npm install --save-dev stylelint stylelint-config-standard
Copy the code

Create a new.stylelintrc.json file in the project root directory and enter the following:

{
    "extends": "stylelint-config-standard"
}
Copy the code

VSCode adds stylelint plug-in:

And then you can see the effect.

If you want to change the default rules of the plugin, see the official documentation, which provides 170 rule changes. For example, if I want to indent with 4 Spaces, I can configure it like this:

{
    "extends": "stylelint-config-standard"."rules": {
        "indentation": 4}}Copy the code

If you want to format the SASS SCSS file, you need to download the stylelint-SCSS plug-in:

npm i -D stylelint-scss
Copy the code

Then you can format the SCSS file.

extension

How do I format THE HTML code in an HTML, Vue (or other suffix) file?

To do this, you need to use VSCode’s built-in formatting. The shortcut keys are shift + Alt + f. Assuming VSCode currently has a Vue file open, pressing shift + Alt + f will prompt you to select a formatting specification. If you are not prompted, you already have a default formatting specification (usually the Vetur plug-in), and then all the code in the Vue file is formatted, and the formatting rules are configurable.

The specific rules are shown in the following figure. You can select formatting rules based on your preferences.

Since you’ve set formatting rules for ESlint and Stylelint previously, Vue files only need to format code in HTML, so you need to disallow vetur to format JavaScript and CSS code:

After completing the configuration, go back to the Vue file. Shuffle the formatting of the code and press Shift + Alt + F to see that the HTML code is formatted, but the JavaScript and CSS code is not. It doesn’t matter, because ESlint and Stylelint formatting are already set, so JavaScript and CSS code will be automatically formatted as soon as you save.

Similarly, formatting conventions can be set this way for other types of files.