The most logical way to configure ESLint + prettier + TS - 21st century while you're still manually copying project configurations

We initialize a vue project and open it with vscode. The.vue file does not have syntax highlighting. To solve this problem, we install Vetur Extension

Install Vetur

Open the project, if vscode popover prompts:

Vetur can’t find tsconfig.json, jsconfig.json in /xxxx/xxxxxx

Because the project lacks tsconfig.json, jsconfig.json, but does not affect the normal use of formatting and syntax validation

Since tsconfig.json contains a lot of configuration items, manually creating and copying configurations from a project that you don’t even understand is not a good idea. For details on how to generate and write tsconfig.json, check out the typescript section

In addition to the syntax highlighting we need, Vetur provides additional support for formatting and syntax validation

formatting`Formatting`

A third-party tool is used for formatting. The default configuration is as follows

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}
Copy the code

Optional value is

prettier (opens new window): For css/scss/less/js/ts.
prettier (opens new window)with @prettier/plugin-pug (opens new window): For pug.
prettier-eslint (opens new window): For js. Run prettier and eslint –fix.
stylus-supremacy (opens new window): For stylus.
vscode-typescript (opens new window): For js/ts. The same js/ts formatter for VS Code.
sass-formatter (opens new window): For the .sass section of the files.

Since the above tools are built into Vetur, we do not need to install the corresponding plug-ins

Vetur bundles all the above formatters.

Additionally, we can modify the vscode configuration if we need to enable formatting when saving

"editor.formatOnSave": true,
Copy the code

Settings of VSCode are divided into USer and Workspace Settings

UserThe configuration in it will apply to all the items on the computer
WorkspaceIf configured, vscode will create one in the current folder.vscodeThe file)

Let’s call the page shown in the following figure Settings UI

At this point, you should be able to trigger formatting on save

If not, it may be your VScode installed more than Vetur a formatting tool, then we need to manually set the formatting tool to Vetur, the way is: right-click the file, select Format Document With…

To disable esLint, go to The Settings UI panel to Enable esLint > Format:Enable, and uncheck the Enables ESLint as a formatter box

Will be automatically synchronized to settings.json:

// settings.json
 "eslint.format.enable": true
Copy the code

If the default formatting rules do not meet your requirements, you can create a.prettierrc.js (or.prettierrc, etc.) file in the project. When Vutur detects the local.prettierrc.js file, it uses the rules in the local file

//.prettierrc.js module.exports = {"semi": false, // do not end "singleQuote": true}Copy the code

Grammar check`Linting / Error Checking`

In User of vsCode Settings, add vue to esLint.validate

 "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
    ],
Copy the code

A good way to add is to: In the Settings UI, go to the User panel, search for ESLint in the input box, find esLint Validate, and click Edit in Settings. json. Consider editing settings.json directly

Vetur has eslint-plugin-vue built in, but only validates the template part of the.vue file

To verify the script portion of.js,.ts, and.vue files, let’s do the following

thetemplateThe verification rights are transferred toeslintFor this, invscode SettingsIn the closedVetur 的 templatecheck

vetur.validation.template: false
Copy the code

Install ESLint extension
Installing local Dependencies

yarn add -D eslint eslint-plugin-vue
Copy the code

Since verification is completely devolved to ESLint, esLint cannot use the built-in eslint-plugin-vue in Vetur, so eslint-plugin-vue needs to be reinstalled

in.eslintrc 的 extendsTo add to an arrayplugin:vue/recommended, the following example is added:

// .eslintrc
{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "vue/html-self-closing": "off"
  }
}
Copy the code

Because.eslintrc contains many configuration items, it’s extremely unreliable to manually create and copy configurations you don’t even understand from a project. For details on how to generate and write.eslintrc, see the Eslint Configuration section

Note that the extends array is executed from left to right, so if your project uses ESLint :recommended, plugin:vue/recommended must come after ESLint :recommended

Additionally, fix ESLint errors if you need to save

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

If used with Editor. formatOnSave:true, the formatting problem occurs twice

Eslint

In configuring Vetur, it is mentioned that the.eslintrc file needs to be modified, so the way to generate.eslintrc is

Global installationeslint

yarn global add eslint
Copy the code

Project folder

eslint --init 
Copy the code

Follow the prompts and choose step by step

So for the first question in the figure above, how do I choose? While Vetur supports code style, Eslint no longer needs it, but code style differences (such as ending with a semi-colon) can cause git conflicts, you might think, “I commit the.prettierrc file together with the ‘.prettierrc ‘file in the git repository.” Vetur supports global formatting rules, which are written in the User of vsCode Settings and cannot be included in.git

This in turn reminds us not to configure any rules in the User of vsCode Settings that will affect the formatting of the project

If the project members agreed, novscode SettingstheUserFormat the configuration, then the second option is preferred
Otherwise choose the third option, but the third option will causeprettier 和 eslintThe solution will be given later

Next, how to change the code style?

If your project uses ending semicolons, but you prefer a style without semicolons, you may want to change the formatting style

// .prettierrc.js
module.exports = {
    semi:false
}

Copy the code

CTRL + S to save the code and see that the project formatting succeeded, but ESLint reported another error

Analyze the reasons: CTRL + s to trigger editor. FormatOnSave, due to we set up the formatter for Vetur vue file, Vetur prettier formatting, and call format after finishing to Eslint do check, Eslint reported an error checking code styles

“Where prettier and ESLint collide

If you don’t select the third option when esLint –init answers the first question, you won’t have this collision problem

Then you might want to modify.eslintre.js again, etc… I don’t want to change the same rule in two places. What can I do to solve this problem? There are several industry solutions available, of which two are known

`js`Some use`eslint`Formatting,`css`.`html`Part, use`pretttier`

Eslint can also act as a formatter. If you can get ESLint to overwrite prettier by formatting itself before checking prettier, it’s prettier-esLint. Vetur is built-in for prettier-eslint. Configuration is also simple

// settings.json
"vetur.format.defaultFormatter.js": "prettier-eslint",
Copy the code

To use:.eslintre.js to configure the JS formatting style,.pretttier.js to configure the HTML CSS formatting style

Set up the`prettier` 和 `eslint`When there is a conflict, to`prettier`Give priority to

Install the following plug-ins

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
Copy the code

.eslintrc.jsonIn the configurationplugin:prettier/recommended 为 extendsThe last term of PI

// .eslintrc.json
{
  "extends": ["plugin:prettier/recommended"]
}
Copy the code

If you are using vue3, change it to vue3’s verification scheme

Extends: [' plugin: vue3 / essential ', / / it is' plugin: vue/essential ' 'reality - base', 'the plugin: prettier/it'].Copy the code

typescript

Global installationts

yarn global add typescript
Copy the code

Project, execution

tsc --init
Copy the code

Recommended order: TSC –init followed by eslint –init

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

The most logical way to configure ESLint + prettier + TS — 21st century while you’re still manually copying project configurations

Install Vetur

formatting`Formatting`

Grammar check`Linting / Error Checking`

Eslint

`js`Some use`eslint`Formatting,`css`.`html`Part, use`pretttier`

Set up the`prettier` 和 `eslint`When there is a conflict, to`prettier`Give priority to

typescript

The most logical way to configure ESLint + prettier + TS — 21st century while you’re still manually copying project configurations

Install Vetur

formattingFormatting

Grammar checkLinting / Error Checking

Eslint

jsSome useeslintFormatting,css.htmlPart, usepretttier

Set up theprettier 和 eslintWhen there is a conflict, toprettierGive priority to

typescript

Related Posts

Javascript FAQ

The pit that angular-Async pipe stepped on

Modularize your CSS code using BEM

formatting`Formatting`

Grammar check`Linting / Error Checking`

`js`Some use`eslint`Formatting,`css`.`html`Part, use`pretttier`

Set up the`prettier` 和 `eslint`When there is a conflict, to`prettier`Give priority to