# 1、前端开发提升效率常用插件
| 插件名称 | 用途 |
|---|---|
| Prettier - Code formatter | 自动格式化 |
| Auto Rename Tag | 支持快速重命名 HTML 标签 |
| Live Sass Compiler | 支持 Sass 实时编译成 CSS |
| CSS Peek | 支持在 HMTL 中跳转到 CSS |
| HTML CSS Support | 在 HTML 中智能提示 CSS 类名 |
| Bracket Pair Colorizer 2 | 有助于我们快速定位代码块 |
| javascript console utils | 快速生成 console.log() |
| SCSS Everywhere | |
| Better Comments | TODO、*、!、? 标注注释 |
| Todo Tree | 显示 TODO 树 |
| Quokka.js | js/ts 快速输出 console.log()内容 |
| Faker | 快速的插入用例数据 |
# 1.1、Prettier 是一个代码格式化工具
Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。
Prettier 插件使用配置文件的优先级：.prettierrc > .editorconfig > settings.json(Prettier 插件默认设置)。
参考：https://blog.csdn.net/weixin_42201272/article/details/106298875
如何配置 Prettier？
方法一（团队协作，推荐使用此方法）：在项目根目录创建.prettierrc，并且填写如下配置信息
{
"singleQuote": true,
"printWidth": 120,
"htmlWhitespaceSensitivity": "ignore",
"tabWidth": 4,
"tabSize": 4,
"semi": true,
"json.format.enable": false,
"javascript.preferences.quoteStyle": "single",
"files.autoSave": "off",
"editor.fontSize": 14,
"window.zoomLevel": 0.3,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"html.format.endWithNewline": true,
"explorer.confirmDelete": false,
"prettier.semi": false,
"prettier.singleQuote": true,
"typescript.updateImportsOnFileMove.enabled": "always"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Prettier 配置说明
{
"printWidth": 100, //每行到多少长度开始折行
"tabWidth": 2,//使用 2 个空格缩进
"tabSize": 2,//使用 2 个空格缩进
"singleQuote": true, //单引号
"trailingComma": "none", //数组、对象最后一个元素的尾逗号
"bracketSpacing": true, //花括号前后空格
"jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 单独一行
"parser": "babel", //指定使用哪一种解析器
"semi": true, //是否在行尾加分号
"useTabs": true, //使用tab（制表符）缩进而非空格
"arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
"jsxSingleQuote": true, //在JSX中使用单引号
"htmlWhitespaceSensitivity": "ignore", //为 HTML 文件定义全局空格敏感度
"quoteProps": "as-needed" //自定义引号配置
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
或者创建.prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 不使用缩进符，而使用空格
useTabs: false,
// 使用 2 个空格缩进
tabWidth: 2,
tabSize: 2,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号 'es5' none
trailingComma: 'es5',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf 结尾是 \n \r \n\r auto
endOfLine: 'lf',
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
方法二（独立开发者，推荐使用此方法）：在settings.json中填写如下配置信息
{
//保存文件时自动用 `Prettier` 格式化
"editor.formatOnSave": true,
// 使能每一种语言默认格式化规则
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
/* 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 // 不让prettier使用tslint的代码格式进行校验
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
至此 Prettier 已经安装、配置完成，用 Shift+Alt+F 格式化代码的时候就会按照 Prettier 的配置项进行格式化。
如何在保存文件时自动用 Prettier 格式化？
在settings.json添加 "editor.formatOnSave": true
#
# 1.8、javascript console utils,快速生成 console.log()
Mac 下面使用
生成快捷键：Cmd+Shift+L
全部删除快捷键：Cmd+Shift+D
# 2、win10 卸载 VScode 时怎么把它的插件卸载掉
删除 VS Code 后
win + r打开运行
%appdata% 回车
删除 Code 和Visual Studio Code 文件夹
地址栏输入 %userprofile% 回车
删除 .vscode 文件夹里面的插件缓存
# 3、VSCode 安装使用编程字体 FiraCode
在系统中安装 Fira 字体后，在settings.json中添加如下配置即可。
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",//添加上FiraCode字体
"editor.fontLigatures": true, //开启连体字
1
2
2
GitHub 官方网址：https://github.com/tonsky/FiraCode
# 0、其他好用插件
GitLens — Git supercharged、Polacode代码截图、Live Server、Material Theme、Chinese、vscode-drawio