If you have any problems at work, doubts in the interview, or obstacles in the front end, you can join our front End Youdao Family. I will try my best to answer your questions and solve your doubts, so that we can work together and grow together.
Click to add technical exchange group or follow the public account 🎨 front youdao
Tabnine – Artificial intelligence assistant
PRO is an ARTIFICIAL intelligence code completion tool, AI code snippets, code suggestions, code prediction, code hints, PRO $12 per month, support insight and analysis, advanced completion of common code, customization options, etc., poor haven’t experienced.
The official address: marketplace.visualstudio.com/items?itemN…
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
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(built-in V1.60)
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.
The official address: marketplace.visualstudio.com/items?itemN…
// settings.json
"editor.bracketPairColorization.enabled": true./ / the personalized
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#ffd700"."editorBracketHighlight.foreground2": "#da70d6"."editorBracketHighlight.foreground3": "#87cefa"."editorBracketHighlight.foreground4": "#ffd700"."editorBracketHighlight.foreground5": "#da70d6"."editorBracketHighlight.foreground6": "#87cefa"."editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"
}
Copy the codeMore configurations can be found in this article blog.csdn.net/qq_21567385…
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…
ClassTree
A relatively new plug-in that quickly generates JSX/Vue class structures based on AST analysis file encoding.
The official address: marketplace.visualstudio.com/items?itemN…