大家好，又见面了，我是你们的朋友全栈君。
记录一下常用的几个前端插件
1 Bracket Pair Colorizer
为代码中的括号 {[()]} 添上一抹亮色，这样找对应括号时会简单很多，可以使代码阅读更加方便。
2 Prettier-Code Formatter
格式化插件，这个可以一键格式化代码，非常香。 安装后需要进行格式化参数的配置： VSCode左下角的设置图标–》设置–》输入框中搜索settings,随便点一个
代码语言：javascript复制/* 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 nr 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的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔代码写完后使用alt shift f来一键格式化代码
3 Chinese (Simplified) Language Pack for Visual Studio Code
汉化vscode
4 CSS Peek
快速找到CSS定义 1.HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。 按住 Ctrl键，鼠标放上去。会显示调用的CSS样式 2.跳转到样式的定义，按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。CSS Peek在开前端开发过程中节省了好多查找样式的时间
5 ES7 React/Redux/GraphQL/React-Native snippet
React-快速生成代码块 通过输入一些简写快速生产对应代码块 如 imr→ import React from ‘react’。习惯了之后还是很好用的
6 Auto Close Tag
自动补全结束标签
7 Auto Rename Tag
自动重命名结束标签
8 any-rule
正则插件，可以查找一些常用正则
9 ESLint
javascript代码检测工具，可以让你的代码写的更加规范
10 GitLens — Git supercharged
在vscode中使用git必备插件，功能非常强大
11 git graph
可以进行版本管理，比如pull、push、修改比较、log、merge
12 git history
右键弹出菜单可以选择看文件的log，这与分支的log是有区别的 还可以查看某一行的history
13 git blame
可以快速的查看某一行最近的一次修改是谁、什么时候、哪次提交修改的
14 Open-In-Browser
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
15 HTML Boilerplate
通过使用 HTML模版插件，摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
16 HTML CSS Support
智能提示CSS类名以及id
17 HTML Snippets
智能提示HTML标签，以及标签含义
18 JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
19 Npm Intellisense
自动补全引入node modules里面所安装的依赖。
20 Path intellisense
自动补全文件名。最常用的地方是，当去import其它文件的时候，能够对文件进行提示，快速补全要引入的文件名。
21 Markdown Preview Enhanced
实时预览markdown
22 Codelf
生成变量名
23 local history
可以记录历史代码
24 vscode-icons
使编辑界面更美观
25 change-case
快速修改当前选定内容或当前单词的命名
26 Markdown All in One
Markdown All in One这款插件可以实现媲美Typora的Markdown编辑体验
27 filesize
查看文件大小
28 Quokka
Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈
29 SVG Viewer
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们
30 TabNine
TabNine 是一款基于人工智能的代码自动补全工具
31 Night Owl
一个惊艳的主题，写代码时动力十足
32 REST Client
REST Client 扩展工具允许你发送 HTTP 请求并直接在 VSCode 中查看响应。再也不需要使用外部应用程序向服务器发送 HTTP 请求。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164343.html原文链接：https://javaforall.cn
