VScode recommended front-end plug-ins

Auto Close Tag automatically add HTML / XML closing tag
Auto Rename Tag rename automatically paired HTML / XML tags
Beautify formatting codes [must]
Bracket Pair Colorizer color recognition matching brackets
Code Runner is a very powerful plug-ins that can run in multiple languages or code snippet file: C, C ++, Java, JavaScript, PHP, Python, Perl, Ruby, Go , and so
after the installation is complete, the upper right corner will appear: ▶
Change-Case Although VSCode built out of the box text conversion options, but only the text case conversion. This plug-and add more naming format used to modify the text, including the hump naming names separated by underscores, snake_case name and CONST_CAS name and other
Chinese (Simplified) Language Pack for Visual Studio Code Simplified Chinese Language Pack

Once installed, locale.json adding "locale": "zh-cn"to load the Chinese (Simplified) Language Pack. To modify locale.json, you can press the Ctrl+Shift+P Open command panel , after screening a list of available commands enter "config", and finally select the configuration language commands.

Color Info This handy plug-in, you will provide information on the use of color in CSS you. You just hover the cursor over the color, you can preview the color information in the color model (HEX, RGB, HSL and CMYK) of the
CSS Peek use this plug-in, you can track to CSS style sheet definitions of classes and ids local. When you right-click the selectors in the HTML file, select "Go to Definition and Peek definition" option, which will be sent to the CSS code for styling of your
Debugger for Chrome debugger front-end,
when ESLint EsLint can help us check the Javascript programming grammatical errors. For example: In Javascript application, you can hardly find a variable or a method of leakage you. EsLint JS code analysis can help us find the bug and to ensure the correctness of the JS grammar written in a certain degree of
filesize display the current file size, click can also see detailed creation, modification time in the status bar at the bottom of
Git History View git form of a chart log
GitLens - Git supercharged show files recent commit and author of the current line commit information
HTML Boilerplate by using HTML templates plug-in, you will get rid of the new distress as an HTML file to re-write head and body labels. You only need to enter the empty html file, and press the Tab key, to generate clean document structure
HTMLHint HTML code format detection
HTML code completion Snippets
htmltagwrap HTML tags in the selected tag sets out one
"Alt + W" ( " Option + W "for Mac)
Image Preview mouse over the preview image is displayed in the path
Indenticator highlight the current indentation depth
intelliSense for CSS class names in HTML css file in the project in the name of the smart tips in html
JavaScript (ES6) code snippets es6 snippet
Live Server Browser Real-time refresh
Node.js modules Intellisense to automate JavaScript / TypeScript module import statements in
the package when npm Intellisense require prompt
path Intellisense auto-complete path
Quokka.js Quokka is a debugging tool plug-in that provides real-time based on the code you are writing feedback
Usage: ctrl + shift + p input quokka will be able to choose new javascript
utility regex Previewer this is a real-time test regular expressions. It can be a regular expression pattern applied to any open files, and highlight all matches
SVG Viewer This plug-in adds a number of useful programs in Visual Studio SVG code, you do not need to leave the editor, you can open the SVG file and view them. It also includes options for conversion to PNG format and generate data URI pattern
Vetur Vue syntax highlighting, syntax error checking, code auto-complete [must] vue project
(with better ESLint plug-in effects)
vscode-fileheader top annotation templates can be defined author, time and other information, and will automatically update last modified
shortcut keys: Ctrl + Alt + i
(default information can be modified in File → Preferences → settings)

setting.json

{
    "window.zoomLevel": 1,
    "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",  // 使用git终端（直接显示当前分支）
    "files.autoSave": "onFocusChange",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "git.autofetch": true,
    "fileheader.Author": "xxx",
    "fileheader.LastModifiedBy": "xxx",
    "prettier.semi": false, // 结尾不加分号
    "prettier.singleQuote": true, // 单引号
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "semi":false, // do not formatted semicolon       },        }
          "singleQuote": true // formatted in single quotes based


}

VScode recommended front-end plug-ins

Guess you like