Vue requires many NPM dependencies and editor plug-ins to improve the development experience. Plugins with similar names always confuse me, and sometimes, to remove unnecessary dependencies, I want to know the purpose of each plugin.

The opinions expressed in this article are personalCopy the code
Tip-sfc refers to single-file components, i.e..vue files -esLint rulesCopy the code

The plug-in

VSCode Vetur

This is a necessary plugin for Vue development in VSCode. It provides SFC syntax highlighting, Emmet, Lint, formatting, smart hints, auto-complete, etc. Some of the functions require the help of other plug-ins.

  • SFC syntax highlighting

Syntax highlighting for template, script, and style fields

  • Code snippet

Make built-in or user – defined snippets available for each area of the SFC

  • Emmet

Configure Emmet using HTML, CSS, SCSS, LESS, Stylus, Sass

  • Linting / Error Checking

Eslint-plugin-vue essential rules eslint-plugin-vue essential rules eslint-plugin-vue The documentation does not describe how to configure rules in VSCode.

Because projects typically require ESLint to be installed and rules to be configured, this feature of Vetur is rarely needed. Recommended by configuring vetur. Validation. The template: false shut down its own Linting, because and ESLint function repetition, details page shows the same error, repeat the information will be shown.

  • formatting

Format code in different areas of the SFC using existing tools, such as prettier (CSS/SCSS/LESS/JS/TS), Prettier-esLint (js), etc.

Such as setting up the “vetur. Format. DefaultFormatter. Js” : “vscode – typescript,” then vetur when formatting js, will use vscode own ts format tool to format. The default configuration of Vetur almost always uses Prettier as a formatting tool, 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

The above formatting is expressed in.vueFile, run the right menu of the “format document” command. If set"vetur.format.enable": false, then.vueThe file will not be able to use this command because there is no formatter. The following are two diagrams.

While Prettier is used, ESLint is used in the project where Prettier is used, while ESLint is used in the project where Prettier is used. Second, automatic formatting is usually used in projects when the save key is pressed, which saves one step of operation.

  • Other factors such as Interpolation Support, Component Data, IntelliSense and Debugging are not detailed

VSCode ESLint

This plugin helps us interact with ESLint better, such as displaying wavy lines, error messages in the editor, automatically fixing errors when saved, formatting, etc., allowing us to sense errors and fix them in real time.

The ESLint dependencies installed in the project are equivalent to an underlying library. You can use ESLint from the command line, for example, ESLint — ext.js,.vue SRC to check for errors. Fix fixable errors with NPX eslint –fix SRC /**/*.{js,vue} You can also use this plug-in to use ESLint more efficiently. This is like adding a GUI to the command line tool, and our configuration for ESLint will be used by them.

VScode Prettier

Prettier Prettier’s version of VSCode is the same as ESLint, there is nothing to say about VSCode ESLint

ESLint

JS Lint, format tools. Very extensible, through a rules Lint, format file.

eslint-plugin-vue

Plugins for ESLint. 1. It is a plugin that helps ESLint detect vUe-related content in.vue files js, template, and.js files. 2. Contains all the custom rules of Vue SFC and their implementation. So by adding this plugin to the ESLint configuration file, we can configure vUe-specific rules, otherwise there would be no rules

eslint-config-**

Rules that contain a set of available ESLint rules that can be used or modified based on them to reduce the workload. For example, eslint-config-standard and eslint-config-alloy. Add the extends field to an ESLint configuration file to apply all the rules it contains. It is usually a configuration of existing rules, but does not contain the implementation of the rules.

eslint-config-prettier

A set of rules that disable rules ESLint might conflict with Prettier.

Prettier

A dedicated formatting tool that supports many file types and partially competes with ESLint in JS formatting. I was going to use it in the project, but it has a few things that I can’t accept right now:

  • Its own formatting rules are not fully configurable
  • The configuration cannot be turned off. You can only select one of multiple options
  • Line folding logic is maddening, such as multi-attribute folding for template elements and chain call folding in JS

This is why I did not use it again for the scaffolding of this upgrade project. Prettier, it seems to me, is for multi-person teams or developers who want code formatted but not formatted.

babel-eslint

Use this plugin to make ESLint all the syntax supported by Babel. ESLint’s Default Parser only supports standard JS syntax, not experimental (new syntax not in the standard) or non-standard syntax (e.g. Flow, TS types), but JSX.

Babel-eslint requires that a project use Babel as a transcoder, which converts code to a format that ESLint recognizes and then lint using ESLint

vue-eslint-parser

Parser for the

// .eslintrc.js
module.exports = {
  parser: 'vue-eslint-parser'.parserOptions: {
    ecmaVersion: 2018.sourceType: 'module'.parser: 'babel-eslint'}}Copy the code

Babel

Babel is a compiler that converts ES2015+ code into ES5-compatible code.

@vue/babel-preset-app

The default configuration of Babel in the Vue CLI includes the following plug-ins

@babel/preset-env Babel, transform the code according to the browserslist configuration we specified, add polyfill, etc.

@babel/plugin-syntax- JSX Babel supports JSX syntax

Vue JSX is supported in @vue/babel-preset- JSX vue 2 + Babel 7+, and babel-plugin-transform-VUE-jsx is used in Vue 2 + Babel 6

@babel/plugin-syntax-dynamic-import supports dynamically imported syntax

@babel/plugin-transform-runtime To avoid some of Babel’s helper functions being injected repeatedly in each file (not polyfill)

reference

Refer to the official documentation of each plug-in, which is fully reflected in the article