1. Efficiency plug-in

1.1 Vetur

Vetur is a required Vue development tool in vscode. It supports the following features.

1.1.1 Syntax highlighting

Vetur supports syntax highlighting for.vue files and supports most mainstream front-end development scripts and plug-ins, such as Sass and TypeScript, in addition to template templates. The full syntax is shown below:

syntax	lang	required extension
<template>	html
<template lang=”pug”>	pug
<template lang=”jade”>	pug
<template lang=”haml”>	haml	Better Haml or Ruby Haml
<template lang=”slm”>	slm	Slm Syntax
<template lang=”slim”>	slim	Slim
<style>	css
<style lang=”postcss”>	postcss
<style lang=”scss”>	scss
<style lang=”sass”>	sass	Sass
<style lang=”less”>	less
<style lang=”stylus”>	stylus	language-stylus
<script>	js
<script lang=”ts”>	ts
<script lang=”coffee”>	coffee

Vetur also supports syntax highlighting of VUE directives (e.g., V-if or :attribute=) and vue interpolation (e.g., {{variable}}).

1.1.2 Error Checking

Vetur checks for errors in the following languages:

• < the template > : HTML

You can also turn off error checking in your settings.json file:

"vetur.validation.[template/style/script]" = false
Copy the code

Through configuration “vetur. Experimental. TemplateInterpolationService” : true can let us in the template can also detect ts syntax.

If you want to use the ESLint rule to do error checking, you need the following configuration.

• Disable template validation for Vetu r using the following command in settings.json:

"vetur.validation.template": false
Copy the code

• Make sure you have the ESLint plugin so that error checking will come from the ESLint plugin and not the Vetur.
• Install ESLint in the workspace root:

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

• Configure ESLint rules in the.eslintrc file. Such as:

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

1.1.3 formatting

Vetur supported formats HTML/CSS/SCSS relation/less/postcss/stylus/js/ts.

Formatter

Vetur can be used with the following formatters:

• prettier
• perttier-eslint
• stylus-supremacy
• vscode-typescript
• sass-formatter

When Vetur observes a locally installed Formatter, it will use the local Formatter in preference.

You can be in vscode configuration by setting the “vetur. Format. DefaultFormatter” to select each language of the default format (set a kind of language the Formatter to none disables the language of the Formatter), the following is the default value:

{
  "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

Can also through “vetur. Format. DefaultFormatterOptions” tool to set the style (vetur is recommended to use two Spaces to rules editor. TabSize and editor insertSpace, Js-beautify is used for HTML and CSS/SCSS/LESS formats) :

{
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {  // Alternate HTML formatter
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100."singleQuote": false."wrapAttributes": false."sortAttributes": false}}},Copy the code

Vetur Formatter config

Vetur Formatter can be turned on and off using the global switch “vetur.format.enable”. This would be useful if Prettier were to handle file formats entirely.

It is also possible to configure global Formatter options, such that the following two Settings are inherited by all Formatters:

{
  "vetur.format.options.tabSize": 2."vetur.format.options.useTabs": false
}
Copy the code

But when it finds a local configuration (as in the.prettierrc file), Vetur takes precedence over local configuration, where the Formatter option overwrites the global configuration of Vetur Formatter.

1.1.4 Intellisense

Vetur provides intellisense for HTML tags and attributes. The same applies to Vue specific attributes, such as V-if and @click.

1.1.5 Code snippets

Vetur allows snippets of code for every embedded language

For example, the code snippet defined for TypeScript is provided in the TypeScript area:

<script lang="ts">
  // Use TS snippets here
</script>
Copy the code

Two exceptions:

• When using vue-HTML snippets, they need to be inside
• Vue can use snippets outside of all places

<template> <! -- Use `vue-html` snippets here --> </template> <! -- Use `vue` snippets here --> <style> </style>Copy the code

1.2 ESLint

1.2.1 Basic Usage

• Install ESLint in the workspace root:

npm install eslint -D
Copy the code

• Install the ESLint plugin in vscode.
• Configure ESLint rules in.eslintrc or.eslintrc.js files and what to ignore in.eslintignore files
• .eslintrc and.eslintrc.js are used to write json, while.eslintrc.js is used to write module.exports = {}.

1.2.2 Configuration Description

The main configuration in the.eslintrc file is as follows:

  "root": true."env": {... },"globals": {... },"extends": [...]. ."parserOptions": {... },// Add custom rules to rules
  "rules": {
    'space-before-function-paren': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    ...
  }
Copy the code

Env determines which environment your script will run in. Common examples are browser, Node, etc

Globals are additional global variables

Rules are configuration rules

• There are three levels of the configuration error rule: 0 or OFF indicates that the rule is disabled. 1 or WARN opens the rule and, as a warning, does not cause the check to fail; 2 or error opens the rule and, as an error, causes the check code to fail.
• Configuration mode:

// The first argument is the error level, and the second argument is the handling method
"array-bracket-spacing": [2."never"]
Copy the code

1.2.3 Automatic Repair

You can configure it directly in package.json:

"scripts": {
  "eslint": "eslint . --fix"
},
Copy the code

This can also be configured in vscode’s settings.json file:

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

1.2.4 Common Configurations

Common configuration items in Rules:

"no-alert": 0.// Disable alert Confirm prompt
"no-array-constructor": 2.// Disallow array constructors
"no-bitwise": 0.// Disallow bitwise operators
"no-caller": 1.// Disallow arguments. Caller or arguments.callee
"no-catch-shadow": 2.// Disallow catch clause arguments with the same name as external scope variables
"no-class-assign": 2.// Disallow class assignment
"no-cond-assign": 2.// Disallow assignment statements in conditional expressions
"no-console": 2.// Disable console
"no-const-assign": 2.// Disallow modifying variables declared by const
"no-constant-condition": 2.// Disallow constant expression if(true) if(1)
"no-continue": 0.// Disallow continue
"no-control-regex": 2.// Disallow control characters in regular expressions
"no-debugger": 2.// Disable the debugger
"no-delete-var": 2.// The delete operator cannot be used on variables declared by var
"no-div-regex": 1.// Can't use regular expressions that look like division /=foo/
"no-dupe-keys": 2.{a:1,a:1}
"no-dupe-args": 2.// Function arguments cannot be repeated
"no-duplicate-case": 2.// The case tag in the switch cannot be repeated
"no-else-return": 2.If there is a return in an if statement, it cannot be followed by an else statement
"no-empty": 2.// Block statements cannot be empty
"no-empty-character-class": 2.// The [] content in the regular expression cannot be empty
"no-empty-label": 2.// Disallow empty label
"no-eq-null": 2.// Disallow null with == or! = operator.
"no-eval": 1.// Disallow eval
"no-ex-assign": 2.// Disallow assignment of exception parameters in catch statements
"no-extend-native": 2.// Forbid extending native objects
"no-extra-bind": 2.// Disallow unnecessary function binding
"no-extra-boolean-cast": 2.// Disallow unnecessary bool conversions
"no-extra-parens": 2.// Disallow unnecessary parentheses
"no-extra-semi": 2.// Disallow extra colons
"no-fallthrough": 1.// Disable switch penetration
"no-floating-decimal": 2.// Disallow omitting 0.5 3 in floating point numbers.
"no-func-assign": 2.// Disallow duplicate function declarations
"no-implicit-coercion": 1.// Disable implicit conversions
"no-implied-eval": 2.// Disallow implicit eval
"no-inline-comments": 0.// Forbid line remarks
"no-inner-declarations": [2."functions"].Disallow declarations (variables or functions) in block statements
"no-invalid-regexp": 2.// Disallow invalid regular expressions
"no-invalid-this": 2.// Disallow invalid this only for constructors, classes, and object literals
"no-irregular-whitespace": 2.// There can be no irregular Spaces
"no-iterator": 2.// Disallow the __iterator__ attribute
"no-label-var": 2.// The label name cannot be the same as the variable name declared by var
"no-labels": 2.// Disallow label declarations
"no-lone-blocks": 2.// Disallow unnecessary nesting blocks
"no-lonely-if": 2.// Disallow only if statements in else statements
"no-loop-func": 1.// Disallow functions in loops (if no external variables are referenced and no closure is formed)
"no-mixed-requires": [0.false].// Do not mix declaration types
"no-mixed-spaces-and-tabs": [2.false].// Do not mix TAB and space
"linebreak-style": [0."windows"].// newline style
"no-multi-spaces": 1.// Do not use extra Spaces
"no-multi-str": 2.// String cannot be wrapped with \ line
"no-multiple-empty-lines": [1, {"max": 2}].// No more than 2 blank lines
"no-native-reassign": 2.// Native objects cannot be overwritten
"no-negated-in-lhs": 2.// The left side of the in operator cannot have!
"no-nested-ternary": 0.// Disallow nested ternary operations
"no-new": 1.// Disallow the use of new to construct an instance without assigning
"no-new-func": 1.// Disallow new Function
"no-new-object": 2.// Disallow new Object()
"no-new-require": 2.// Disable new require
"no-new-wrappers": 2.// Disallow creating wrapper instances with new, new String new Boolean new Number
"no-obj-calls": 2.// Cannot call built-in global objects such as Math() JSON()
"no-octal": 2.// Disallow octal digits
"no-octal-escape": 2.// Disallow octal escape sequences
"no-param-reassign": 2.// Disallow parameter reassignment
"no-path-concat": 0.// Node cannot use __dirname or __filename for path concatenation
"no-plusplus": 0.// Disallow ++, --
"no-process-env": 0.Process. env is disabled
"no-process-exit": 0.// Disallow process.exit()
"no-proto": 2.// Disallow the __proto__ attribute
"no-redeclare": 2.// Disallow variable declarations repeatedly
"no-regex-spaces": 2.// Disallow multiple Spaces /foo bar/ in regular expression literals
"no-restricted-modules": 0.// If the specified module is disabled, an error will be reported
"no-return-assign": 1.// Return statements cannot have assignment expressions
"no-script-url": 0.// Disable javascript:void(0)
"no-self-compare": 2.// Cannot compare itself
"no-sequences": 0.// Disallow the comma operator
"no-shadow": 2.// A variable in an outer scope cannot have the same name as a variable or parameter in the scope it contains
"no-shadow-restricted-names": 2.// Restricted identifiers specified in strict mode cannot be used as variable names for declaration
"no-spaced-func": 2.// Function calls cannot have Spaces between function names and ()
"no-sparse-arrays": 2.// Disable sparse array, [1, 2]
"no-sync": 0.//nodejs disallows synchronized methods
"no-ternary": 0.// Disallow the use of ternary operators
"no-trailing-spaces": 1.// No Spaces after the end of a line
"no-this-before-super": 0.This or super cannot be used before super() is called
"no-throw-literal": 2.// Disallow throwing "error";
"no-undef": 1.// There cannot be undefined variables
"no-undef-init": 2.// A variable cannot be initialized with undefined
"no-undefined": 2.// Undefined cannot be used
"no-unexpected-multiline": 2.// Avoid multi-line expressions
"no-underscore-dangle": 1.// Identifiers cannot start or end with an _
"no-unneeded-ternary": 2.// disable unnecessary nesting var isYes = answer === 1? true : false;
"no-unreachable": 2.// There can be no code that cannot be executed
"no-unused-expressions": 2.// Disallow useless expressions
"no-unused-vars": [2, {"vars": "all"."args": "after-used"}].// Can't make out unused variables or parameters
"no-use-before-define": 2.// Cannot be used before definition
"no-useless-call": 2.// Disable unnecessary call and apply
"no-void": 2.// Disable the void operator
"no-var": 0.// Disable var and use let and const instead
"no-warning-comments": [1, { "terms": ["todo"."fixme"."xxx"]."location": "start"}].// There can be no warning remarks
"no-with": 2./ / disable the with
 
"array-bracket-spacing": [2."never"].// Allow extra Spaces in non-empty arrays
"arrow-parens": 0.// The arrow functions are enclosed in parentheses
"arrow-spacing": 0.//=> before/after parentheses
"accessor-pairs": 0.// Use getters/setters in objects
"block-scoped-var": 0.// Block statements using var
"brace-style": [1."1tbs"].// Braces style
"callback-return": 1.// Avoid multiple callbacks
"camelcase": 2.// Enforce hump naming
"comma-dangle": [2."never"].Object literals cannot end with commas
"comma-spacing": 0.// Spaces before and after commas
"comma-style": [2."last"].// comma-style, start or end of a line break
"complexity": [0.11].// Cyclic complexity
"computed-property-spacing": [0."never"].// Are computed key names allowed
"consistent-return": 0.// Whether to omit after return
"consistent-this": [2."that"]./ / this alias
"constructor-super": 0.// Non-derived classes cannot call super. Derived classes must call super
"curly": [2."all"].// You must use {} in if(){}
"default-case": 2.// Switch statements must end with default
"dot-location": 0.// The position of the accessor, at the beginning or end of a line break
"dot-notation": [0, { "allowKeywords": true}].// Avoid unnecessary square brackets
"eol-last": 0.// The file ends with a single line break
"eqeqeq": 2.// Must use congruence
"func-names": 0.// Function expressions must have names
"func-style": [0."declaration"].// Function style, specifying that only function declarations/function expressions can be used
"generator-star-spacing": 0.// Spaces before and after the generator function *
"guard-for-in": 0.// For in loops are filtered with if statements
"handle-callback-err": 0.// Nodejs processing error
"id-length": 0.// Variable name length
"indent": [2.4].// Indent style
"init-declarations": 0.// The initial value must be assigned
"key-spacing": [0, { "beforeColon": false."afterColon": true}].// Spaces before and after colons in object literals
"lines-around-comment": 0.// Remarks before/after the line
"max-depth": [0.4].// Nested block depth
"max-len": [0.80.4].// Maximum length of a string
"max-nested-callbacks": [0.2].// Call back the nesting depth
"max-params": [0.3].// A function can take a maximum of 3 arguments
"max-statements": [0.10].// There are at most a few declarations in a function
"new-cap": 2.Function names with uppercase must be called with new, and lowercase must be called without new
"new-parens": 2.// New must be enclosed in parentheses
"newline-after-var": 2.// Whether the variable declaration should be followed by a blank line
"object-curly-spacing": [0."never"].// Whether unnecessary Spaces are allowed in braces
"object-shorthand": 0.// Enforces the object literal abbreviation syntax
"one-var": 1.// continuous declaration
"operator-assignment": [0."always"].// Assignment operator += -= what
"operator-linebreak": [2."after"].// The end of the line or the beginning of the line
"padded-blocks": 0.// Whether the first and last lines of block statements should be blank
"prefer-const": 0./ / the preferred const
"prefer-spread": 0.// Preferred expansion operation
"prefer-reflect": 0.// Reflect's preferred method
"quotes": [1."single"].// Quote type '' "" '"
"quote-props": [2."always"].// Whether double quotes are mandatory for attribute names in object literals
"radix": 2.//parseInt must specify a second argument
"id-match": 0.// Name detection
"require-yield": 0.// Generator functions must yield
"semi": [2."always"].// The statement enforces a semicolon ending
"semi-spacing": [0, {"before": false."after": true}].// Space before and after the semicolon
"sort-vars": 0.// Sort when declaring variables
"space-after-keywords": [0."always"].// Whether to leave a space after the keyword
"space-before-blocks": [0."always"].// blocks that do not start with a new line {with or without Spaces before them
"space-before-function-paren": [0."always"].// Do you want Spaces before parentheses when defining functions
"space-in-parens": [0."never"].// Do you want Spaces in the parentheses
"space-infix-ops": 0.// Do you want Spaces around infix operators
"space-return-throw-case": 2.//return throw case should not be followed by a space
"space-unary-ops": [0, { "words": true."nonwords": false}].// Do you want Spaces before or after unary operators
"spaced-comment": 0.// Comment style should have Spaces or something
"strict": 2.// Use strict mode
"use-isnan": 2.// Disallow NaN for comparison, only isNaN()
"valid-jsdoc": 0./ / jsdoc rules
"valid-typeof": 2.// Must use valid Typeof values
"vars-on-top": 2.//var must be placed at the top of scope
"wrap-iife": [2."inside"].// Execute function expressions immediately in parenthesis style
"wrap-regex": 0.// Regular expression literals are wrapped in parentheses
"yoda": [2."never"]// Disable yoda conditions
Copy the code

1.3 Prettier

After installing the prettier plug-in, select prettier as the default way to format code, using shift+ Alt +f shortcuts in vscode.

To format code automatically when saving, set “editor.formatOnSave”: true in vscode’s settings.json file.

1.3.1 Configuration Mode

• Using vscode settings.json:

  "prettier.singleQuote": true."prettier.semi": false."prettier.printWidth": 400."prettier.trailingComma": "none"
Copy the code

• Prettierrc by adding the custom configuration file.prettierrc:

  "singleQuote": true."semi": false."printWidth": 400."trailingComma": "es5"
Copy the code

1.3.2 Common Configurations

Common configuration items:

"prettier.useEditorConfig": false.// Make prettier ignore configuration rules in. Editorconfig
"prettier.printWidth": 400.// Over the maximum line break
"prettier.tabWidth": 4.// Indent the number of bytes
"prettier.useTabs": false.// Indent instead of TAB, use Spaces
"prettier.semi": true.// Add a semicolon at the end of a sentence
"prettier.singleQuote": true.// Use single quotes instead of double quotes
"prettier.proseWrap": "preserve".// Default value. Folds markdown text style due to the use of some fold-sensitive renderer (such as GitHub Comment)
"prettier.arrowParens": "avoid".// (x) => {} arrow function with only one argument whether to have parentheses. Avoid: omit parentheses
"prettier.bracketSpacing": true.// Add a space between the object, array bracket and text "{foo: bar}"
"prettier.disableLanguages": ["vue"].// Do not format the vue file, the vue file formatting is set separately
"prettier.endOfLine": "auto".// It ends with \n\r \n\r auto
"prettier.eslintIntegration": false.// Don't let Prettier use ESLint's code format for validation
"prettier.htmlWhitespaceSensitivity": "ignore"."prettier.ignorePath": ".prettierignore".// Fill in the. Prettier ignore file of the project without the formatting of prettier
"prettier.jsxBracketSameLine": false.// Whether to put '>' on a single line in JSX
"prettier.jsxSingleQuote": false.// Use single quotes instead of double quotes in JSX
"prettier.parser": "babylon".// Formatted parser, default to Babylon
"prettier.requireConfig": false.// Require a 'prettierconfig' to format prettier    
"prettier.stylelintIntegration": false.// Don't let Prettier use the code format of stylelint to check
"prettier.trailingComma": "es5".// Whether to place a comma after the last element of an object or array (as in ES5) (if set to "None", no trailing comma)
"prettier.tslintIntegration": false // Don't let Prettier use tsLint's code format}
"prettier.vueIndentScriptAndStyle": false.// Don't let vue files between  use vue separate indentation
Copy the code

Settings should be read from:

1. Prettier configuration file (.prettierrc)
2. .editorconfig
3. Visual Studio Code Settings (settings.json)

But as long as there’s an .editorconfig in the project without .prettierrc, Settings which have been written in the VSCode's settings.json are no longer valid, even if they are not mentioned in the .editorconfig.

1.4 Markdown All in One

You can quickly edit and preview markdown documents in vscode, with keyboard shortcuts, directories, automatic previews, and more.

1.5 Auto Import

When importing, automatically find, analyze, and provide code completion. This works for TypeScript and TSX.

1.6 Auto Close Tag

Automatic closing tag, which automatically inserts the closing tag after typing in the closing brackets of the opening tag.

1.7 Auto Rename Tag

Automatically renames paired HTML/XML tags.

1.8 IntelliSense for CSS class names in HTML

This smart plugin provides completion of CSS class names in HTML, based on your project and external files referenced via the link tag.

1.9 CSS Peek

You can locate its definition in HTML by CSS ID or class.

1.10 npm

This extension supports running NPM scripts defined in packages and validating installed modules against dependencies defined in package.json.

1.11 npm Intellisense

You can automatically complete the module name when importing the NPM module.

1.12 SVG Viewer

A plugin for previewing SVG.

1.13 Bracket Pair Colorizer

Matching parentheses can be highlighted to distinguish between different code blocks.

1.14 Debugger for Chrome

Use Chrome to Debug your JavaScript code.

1.15 Code Runner

Support immediate execution of code in multiple languages.

Supported languages are: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D.

1.16 Path Intellisense

Intelligent path prompt, you can enter a file path intelligent prompt next path.

1.17 Codelf

Codelf is a website for naming variables. You just type in the Chinese name you think of and it will give you a lot of suggested names.

Codelf plug-in can be installed in vscode, select the field and right click to pop up the Codelf option, you can quickly search the corresponding name of the word.

1.18 Local History

Use Local History to retrieve locally deleted code when you can’t retrieve just deleted code with Ctrl+ Z undo alone.

After installing the plugin, the word LOCAL HISTORY appears in the sidebar. Whenever we save changes, it makes a backup of the HISTORY file, and when we want to restore the previous version, we just need to click on the corresponding file. It also displays comparison details in the edit box, so you can see where you want to change.

1.19 file-size

View the current file size in real time.

1.20 Image preview

You can preview the image on the left, and hover over the path of the image to display the image.

1.21 Import Cost

You can easily view the size of the imported package.

2. User code snippets

Create custom user snippets by clicking preferences → user snippets in vscode, and then selecting html.json or another existing snippet.

As in the following Example:

{
	// Example:
	"vue3 snippets": {
	  "prefix": "vue3"."body": [
		"<template>"." 
      
"."</template>".""."<script lang=\"ts\">"."import { defineComponent} from 'vue'"."export default defineComponent({"." setup() {".""."}"."})"."</script>".""."<style>".""."</style>"]}}Copy the code

At this point, in the global, enter vue3 and press TAB to directly generate the content in the above “body”.

3. Common shortcut keys

3.1 general

Press	Function
Ctrl + Shift + P, F1	Display command panel
Ctrl + P	Go to the file
Ctrl + Shift + M	Display problem panel
Ctrl + Shift + N	New window/instance
Ctrl + Shift + W	Close the window/instance

3.2 Basic Editing

Press	Function
Ctrl + X	Cut current line (null selected)
Ctrl + C	Copy current line (null selected)
Ctrl + Shift + K	Delete current row
Ctrl + Enter	Insert the row below
Alt + ↑ / ↓	Moves the current row up/down
Shift + Alt + ↓ / ↑	Copies the current row up/down
Ctrl + Shift + ↓ / ↑	Select everything below/above the current cursor
Ctrl + Alt + ↓ / ↑	Multi-line editor
Shift + Alt + left mouse button	More columns to edit

3.3 Search and Replace

Press	Function
Ctrl + F	To find the
Ctrl + D	Add the selection to the next lookup match

3.4 Editor management

Press	Function
Ctrl + W	Close the current editor
Ctrl + K F	Close the current folder
Ctrl + \	Split editor

3.5 File Management

Press	Function
Ctrl + N	Create a new file
Ctrl + O	Open the file
Ctrl + S	Save the file

3.6 Integrated Terminal

Press	Function
Control + `	Display integrated terminal
Ctrl + Shift + C	Opening the External Terminal