directory
- Vetur developed one of Vue’s children’s shoes must-have plug-ins
- Volar development of Vue3.0 children’s shoes must be one of the plug-ins
- Simplified Language Simplified Language package
- Translation (English-Chinese Dictionary)
- Material Icon Theme
- VSCode Icons icon theme
- Bracket Pair Colorizer
- GitLens enhances Git tools
- Git History
- Path Intellisense Indicates Path intelligence
- Auto Rename Tag Automatically closes a label
- Auto Close Tag Automatically changes the label name
- Code Runner runs Code
- Live Server Sets up static pages of the local Server
- Prettier-code formatter Formatting Code
- ESlint code checks
Vetur
This plugin, which I’m sure you all know or have used, provides Vue specific syntactic semantic highlighting, code snippets, and API syntax for error checking and debugging.
The official address: marketplace.visualstudio.com/items?itemN…
Volar (Vue3.0 development)
If your projectVue3.0I recommend this plug-in for a better experience.
Volar is a language-enabled plug-in built specifically for Vue 3 that optimizations the performance of native TypeScript language services based on @vue/ Reactivity computing TypeScript on demand.
The official address: marketplace.visualstudio.com/items?itemN…
Chinese (Simplified) Language Pack for Visual Studio Code
This plug-in converts VSCode from English to Chinese. For me, an English dud. And this is the official Chinese package, no problem with understanding.
Chinese (Simplified) Language Pack for Visual Studio Code
Translation code translation
Online translation, translation out of the results really slow, ridicule. This local English-Chinese dictionary of 770,000 entries does not rely on any online translation API, has no limit on the number of queries, and outputs results in seconds.
The plugin supports hump, small hump, underline, etc., for variable names, attribute names, class names, and method names.
The official address: marketplace.visualstudio.com/items?itemN…
Material Icon Theme
Very complete icon, say you want to include in this, only a small portion of the image.
The official address: marketplace.visualstudio.com/items?itemN…
vscode-icons
This is the official icon theme pack of VSCode, depending on your personal preference to choose from the icon library. Results the following
The official address: marketplace.visualstudio.com/items?itemN…
Bracket Pair Colorizer
This plug-in uses color to identify matching parentheses. If you have a lot of code, you have a lot of parentheses, and if you delete a property name object, there’s no color discrimination and you delete it by mistake.
But normally, it is not recommended to write a lot of parentheses. It is recommended to write flat. Although the color code is too long, it is also a headache to see.
The official address: marketplace.visualstudio.com/items?itemN…
GitLens
Visual code writers can seamlessly navigate and explore Git repositories at a glance through Git finger-pointing comments and code lenses.
Git History
View Git logs, file history, compare branches, or commit.
When you need to view the history of a file, you might use another Git UI tool to view it. Yay, just click on the icon in the upper right corner of the file to see the history code and code differences.
The official address: marketplace.visualstudio.com/items?itemN…
Path Intellisense Indicates Path intelligence
When we need to import a file or image, the folder hierarchy may be many, we can use this plug-in to remind us what files are currently under the file.
The official address: marketplace.visualstudio.com/items?itemN…
Auto Rename Tag
Automatically renames paired HTML/XML tags.
< A-button >
is generated when we modify the < A-button >
label.
The official address: marketplace.visualstudio.com/items?itemN…
Auto Close Tag
Automatically add HTML/XML closing tags.
.
The official address: marketplace.visualstudio.com/items?itemN…
Code Runner
Run code snippets or code files in multiple languages, supporting C, Java, JavaScript, PHP, Python, etc
Just click the right mouse button and chooseRun CodeI’ll get the result.
The official address: marketplace.visualstudio.com/items?itemN…
Live Server
Automatic reloading of static feature HTML pages on local server setup.
Right-click the HTML page and choose Open with Live Server
The official address: marketplace.visualstudio.com/items?itemN…
Prettier – Code formatter
Json {"editor.formatOnSave": false, // Format file "editor.defaultFormatter" when saving: "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }Copy the codeThe official address: marketplace.visualstudio.com/items?itemN…
ESlint
In a multi-person team, it is important to have a common code writing specification. A set of specifications allows us to write code in a consistent style, improving readability and consistency. Natural maintainability will also improve.
eslintThe ruleseslint-config-vueMade a few modifications. You can customize the configuration according to your own needs.
// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}
Copy the codeThe official address: marketplace.visualstudio.com/items?itemN…