A small goal ⛳️ : To edit vue2 projects created by default Vue CLI with VS Code, with error checking and Code style checking for.vue,.js files, autofix when saving, format them Prettier style.

Search for vscode’s vue project lint and formatting online, and most of the articles describe the team’s own package specification, many of the rules are not universal, and many of the outdated and invalid configurations are posted (currently 2021), which makes my head go up 🤯

I just want an official default configuration where vue, ESLint, prettier are combined. So I decided to take the plunge and search each website for the simplest configuration ⚙️

✅Tips: Only care about the configuration of friends, directly pull to the last.

The solution of the problem

After a round of exploration and thinking, in order to achieve the above goals, we actually need to solve three problems:

  1. Code checking (Lint), including error checking and style checking
  2. Do code autofixes after Lint
  3. Use the formatter to do the autofix

For the configuration of the VS Code editor, we need to address the following concepts and solutions:

  • concept
    • The difference between Linter and Formatter?
  • VS Code related
    • How does VS Code recognize Vue SFC(.vue single file) files?
    • How does VS Code recognize a project’s ESLint configuration and prompt an error in the editor?
    • How does VS Code automatically fix ESLint errors when saving?
    • How does VS Code automatically fix ESLint errors by Prettier, a formatting tool?
    • How to Resolve rule conflicts between ESLint and Prettier
  • Project configuration related
    • What rules are included in the default ESLint configuration created by the Vue CLI?
    • How to set Eslint code error rules?
    • How to set the rule for Eslint’s code style Prettier?

The difference between Linter and Formatter?

Linter is a syntax checking/code quality checking tool that has its own versions in different languages, such as ESLint for JavaScript, JSLint, PyLint for Python… The most commonly used JS is ESLint. By configuring rules +ESLint command line tool (CLI), you can achieve code error detection, style error detection, automatic error repair and other capabilities.

And then there’s Formatter: Formatter is a code Formatter, a tool that helps you format your code according to rules, so that your project code looks pretty and uniform. Typical front-end formatters include Prettier and Beautify, which can standardize HTML, CSS, JS and other front-end languages.

So what’s the difference between Linter and Formatter? 1. Prettier vs. Linters · Prettier, Linters can be seen in two main configurations:

  • Formatting rules:
    • Eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
  • Code quality rules:
    • Eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors… While Formatter, like Prettier, only cares about rules for formatting code, not for code quality.

Therefore, we should give full play to our respective strengths in the project:

  • Use Linter for code quality checks
  • Configure rules for Formatter in Linter and use Linter for code style checking
  • Use Formatter to format code

💪 Combat: Configure from scratch

Environment Description:

  • Mac OS 10.15.7
  • Vs code 1.50.1
  • @ vue/cli 4.5.12
  • There are VUe2 projects configured for ESLint

Initialize the VUe2 project

The scenario would be to create a default vue2 project via @vue/ CLI, including esLint, Babel, and so on.Once created, open the project with VS Code without any plug-ins:

Install the necessary VS Code plug-ins

See. Vue files do not have syntax highlighting by default, we need to installveturPlugins to supportOnce installed, vscode supports syntax highlighting for vue SFC files:What?? Vue/CLI creates esLint configuration by default.

Code quality error detection

In fact, you need to install vs Code plug-ins hereESLintHe can read the ESLint configuration in the project and tell VS Code so that VS Code can find errors in the editor and show them!After the installation, go back toApp.vueEslint (no-undef) : vscode can read the eslint configuration of the project and locate the error according to the no-undef rule. Pay attention to,This is a code quality error.For vue templates, code quality errors can also be detected:You can see where the error rule comes fromeslint-plugin-vueThis is because the ESLint rule created by the Vue CLI contains two inherited rules:

  • Eslint :recommended: Responsible for checking FOR JS errors (ESLint), from the esLint package

  • Plugin :vue/essential: Responsible for checking vue errors (eslint-plugin-vue), from the eslint-plugin-vue package

Code style class error detection

So let’s test that outCode style class errorAdd extra Spaces to both template and script:Good guy, so ugly code does not report errors, there is no law? ! Why, don’t we have esLint rules configured? Doubt comes to our two rules:eslint:recommended.plugin:vue/essential, information search found:

List of available rules-eslint-pluggable JavaScript Linter tells us: ESLint :recommended contains only code quality rules that are required, not style rules.

User Guide | eslint plugin – vue tells us: the plugin: vue/essential contains only the vue in eslint parsing, and check the vue mistakes, for style rules and don’t care at all. If we want to include a code style specification for VUE, we should use the “Plugin :vue/recommended” rule set. We just need to change the ESLint configuration:

"eslintConfig": {
    "root": true."env": {
      "node": true
    },
    "extends": [+"plugin:vue/recommended"
-     "plugin:vue/essential"."eslint:recommended"]."parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}},Copy the code

Back in the editor, you can see the template code style check alarm, but the script is still not prompted.It’s easy to imagine where Prettier would come into the current ESLint rule set lacking JS’s style verification rule! We want EsLint to write prettier’s rule, which needs to be installed in the projecteslint-plugin-prettier-vueNPM dependency, according to its NPM documentation guidelines, we installed in the project:

npm install --save-dev \
  eslint-plugin-prettier-vue \
  eslint-plugin-vue \
  eslint-config-prettier \
  eslint \
  prettier
Copy the code
  • Prettier: The core package of prettier
  • Eslint: Is the core package of ESLint
  • Eslint-plugin-vue: An ESLint plugin for VUE that contains multiple rule sets
  • Eslint-plugin-prettier-vue: The ESLint plug-in for prettier fo vue that contains the prettier style detection rule set for prettier
  • Eslint-config-prettier: Disable the rule where Linter and Prettier conflict to ensure that EsLint does not prettier than Linter

After installation we will add the style verification rule set to ESLint:

"eslintConfig": {
    "root": true."env": {
      "node": true
    },
    "extends": [
	    "plugin:vue/recommended",
+     "plugin:prettier-vue/recommended"."eslint:recommended"]."parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}},Copy the code

Back in the editor, template, script, and style errors are now detected!

Open ESLint Autofix

Error detected, we need to fix the error, we can fix it manually (too stupid), or we can run esLint –fix (too cumbersome) from the command line, is there a more comfortable way, yes, automatically fix style errors when saving files!

To turn this feature on, we turn it on in vscodeSet preference, click to switch to JSON configuration file mode:Add to the configuration:

// EsLint performs the fix action when code saving is enabled
"editor.codeActionsOnSave": { 
  "source.fixAll.eslint": true
},
Copy the code

Save and go back to the editor and pressctrl+sSave, you can find the code according toprettierThe rules, a breath of formatting good!ESLint now takes the style rule for vue and JS +prettier for Vue to detect code anomalies and automatically fix style problems 🤩

We’ve completed the goal of editing the vue2 project with eslint configuration under vscode, having code quality checks + code style checks and automatically fixing the prettier rule!

Other instructions

The scope of autofix

Only code style errors (indent, line feed) can be fixed automatically, code quality errors cannot be fixed automatically. Automatically fix bugs for you)

As shown above, typing AAA detects a quality problem (no-undef) and a style problem (missing; “), and clicking Save will only help you add the semicolon to 😥

About prettier style overlay

Rules in esLint configuration (eslint.org/docs/rules/… Prettier uses single quotation marks:

rules: {
    'prettier-vue/prettier': [
      'error'.// Inconsistencies are set to errors for ESLint to fix
      {
        // Override all options of `prettier` here
        // @see https://prettier.io/docs/en/options.html
        singleQuote: true,}]},Copy the code

Question summary

  • VS Code related

    • How does VS Code recognize Vue SFC(.vue single file) files?
      • throughveturThe plug-in
    • How does VS Code recognize a project’s ESLint configuration and prompt an error in the editor?
      • throughEslintThe plug-in
    • How does VS Code automatically fix ESLint errors when saving?
      • Enable in Preference configuration:editor.codeActionsOnSave -> "source.fixAll.eslint": true
    • How does VS Code automatically fix ESLint errors by Prettier, a formatting tool?
      • Project installationprettier.eslint.eslint-plugin-prettier-vue.eslint-config-prettier
      • Inheritance in esLint configurationplugin:prettier-vue/recommendedThe rules
    • How to Resolve rule conflicts between ESLint and Prettier
      • Install the eslint-config-prettier dependency to disable the conflicting rule. Use it with other packages, for exampleeslint-plugin-prettier-vue

  • Project configuration related

    • What rules are included in the default ESLint configuration created by the Vue CLI?

      • Eslint: Recommended: Responsible for checking FOR JS errors (ESLint), no style checking, from the ESLint package

      • Plugin :vue/essential: Responsible for checking vue for necessary errors (eslint-plugin-vue), without style checking, from the eslint-plugin-vue package

    • How to set Eslint code error rules?

      • Inherit an existing rule set or configure it manually through rules

    • How to set the rule for Eslint’s code style Prettier?

      • throughplugin:prettier-vue/recommendedInherit Prettier’s rule set

Configuration summary

VS Code plug-in:

  • Vetur: lets vscode recognize vue SFC files, syntax highlighting, code detection, etc
  • ESLintHave vscode read the project eslint configuration and prompt syntax errors in the editor, apply autofixes, etc

NPM development dependencies:

  • prettier:Is the core package for Prettier
  • eslint: is the core package of ESLint
  • eslint-plugin-vuE: is an ESLint plugin for VUE that contains multiple rule sets
  • eslint-plugin-prettier-vueThe esLint plugin for Prettier fo vue that contains the set of prettier style detection rules
  • Eslint-config-prettier: Disable the rule where Linter and Prettier conflict to ensure that EsLint does not prettier than Linter

ESLint configuration:

"eslintConfig": {
    "root": true."env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended"."plugin:prettier-vue/recommended"."eslint:recommended"]."parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "prettier-vue/prettier": [
        "error",
        {
          "singleQuote": true}}}]Copy the code

VS Code configuration

// EsLint performs the fix action when code saving is enabled
"editor.codeActionsOnSave": { 
  "source.fixAll.eslint": true
}
Copy the code

That’s the simplest configuration of lint/autofix/format in vscode for the Vue project 🤓 equip your weapons and start coding 👨🏻💻

Reference website:

1. Prettier vs. Linters · Prettier: Prettier. IO /docs/en/com…

ESLint rules: eslint.org/docs/rules/

Eslint plugin – vue: eslint.vuejs.org/user-guide/…

Eslint – plugin – prettier – vue: www.npmjs.com/package/esl…