Record several commonly used front-end plug-ins
1 Bracket Pair Colorizer
Add a touch of bright color to the brackets {[()]} in the code , so that it will be much easier to find the corresponding brackets, and it will make the code easier to read.
2 Prettier-Code Formatter
Formatting plug-in, this can format the code with one click, very fragrant.
After installation, you need to configure the formatting parameters:
the setting icon in the lower left corner of VSCode – “Settings –” search for settings in the input box, and click one
/* prettier的配置 */
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false,
"terminal.integrated.allowMnemonics": true,
"terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔
After the code is written, use alt+shift+f to format the code with one click
3 Chinese (Simplified) Language Pack for Visual Studio Code
Sinicization vscode
4 CSS Peek
Quickly find the CSS definition
1.HTML file, hold down the CTRL key and move the mouse to the class to view the style to see the definition of the class.
Hold down the Ctrl key and place the mouse on it. The invoked CSS style will be displayed
2. Jump to the definition of the style, hold down the CTRL key and click the name of the style class at the same time or press the F12 key on the name of the class to jump to the definition of the style. CSS Peek saves a lot of time in finding styles during front-end development
5 ES7 React/Redux/GraphQL/React-Native snippet
React-quickly generate code blocks
Quickly generate corresponding code blocks by entering some abbreviations
such as imr→ import React from 'react'. It's still good after you get used to it
6 Auto Close Tag
Autocomplete closing tags
7 Auto Rename Tag
Automatically rename closing tags
8 any-rule
Regular plug-in, you can find some common regular
9 ESLint
A javascript code detection tool that can make your code more standardized
10 GitLens — Git supercharged
Use the git essential plug-in in vscode, which is very powerful
11 git graph
Can perform version management, such as pull, push, modification comparison, log, merge
12 git history
You can choose to view the log of the file in the right-click pop-up menu, which is different from the log of the branch.
You can also view the history of a certain line
13 git blame
You can quickly check who, when, and when the most recent modification of a row was made
14 Open-In-Browser
Since VSCode does not provide a built-in interface to open files directly in the browser, this plugin adds the option to view files in the default browser and the option to open the command panel in the client (Firefox, Chrome, IE) in the shortcut menu.
15 HTML Boilerplate
By using the HTML template plugin, get rid of the trouble of rewriting the head and body tags for new HTML files. Just enter html in an empty file and press Tab to generate a clean document structure.
16 HTML CSS Support
Smart prompt CSS class name and id
17 HTML Snippets
Smart prompt HTML tags, as well as tag meaning
18 JavaScript(ES6) code snippets
ES6 syntax intelligent prompts, and fast input, not only supports .js, but also supports .ts, .jsx, .tsx, .html, .vue, saves the time to configure it to support various js code files
19 Npm Intellisense
Auto-completion introduces dependencies installed in node modules.
20 Path intellisense
Autocomplete filenames. The most commonly used place is that when importing other files, you can prompt the file and quickly complete the file name to be imported.
21 Markdown Preview Enhanced
Preview markdown in real time
22 Codelf
Generate variable names
23 local history
History code can be recorded
24 vscode-icons
Make the editing interface more beautiful
25 change-case
Quickly modify the current selection or the naming of the current word
26 Markdown All in One
Markdown All in One is a plug-in that can achieve a Markdown editing experience comparable to Typora
27 file size
view file size
28 Quokka
Quokka is a debugging tool plugin that provides real-time feedback on the code you are writing
29 SVG Viewer
This plugin adds many useful SVG programs in Visual Studio Code, you can open SVG files and view them without leaving the editor
30 TabNine
TabNine is an artificial intelligence-based code auto-completion tool
31 Night Owl
An amazing theme that gives you a lot of motivation when writing code
32 REST Client
The REST Client extension allows you to send HTTP requests and view the responses directly in VSCode. It is no longer necessary to use external applications to send HTTP requests to the server.