自用 VSCode 插件

发表于

更新于

字数

阅读量

自用 VSCode 插件推荐

通用

1. 编辑器通用规范 EditorConfig for VS Code

editorconfig 用来定义编辑器的编码格式规范，编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高。

简单说明：在项目根目录下创建 .editorconfig 文件，然后设置好内容，则其他人更新后同步到本地，你们的代码规范就会保持一致。

我的 .editorconfig 文件内容：

.editorconfig

# 根目录的配置文件，编辑器会由当前目录向上查找，如果找到`root = true` 的文件，则不再查找
root = true

[*]
indent_style = space                # 空格缩进,可选"space"、"tab"
indent_size = 2                     # 缩进空格为2个
end_of_line = lf                    # 结尾换行符，可选"lf"、"cr"、"crlf"
charset = utf-8                     # 文件编码是 utf-8
trim_trailing_whitespace = true     # 不保留行末的空格
insert_final_newline = true         # 文件末尾添加一个空行
curly_bracket_next_line = false     # 大括号不另起一行
spaces_around_operators = true      # 运算符两遍都有空格
indent_brace_style = 1tbs           # 条件语句格式是 1tbs

[*.js]                              # 对所有的 js 文件生效
quote_type = single                 # 字符串使用单引号

[*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
quote_type = double                 # 字符串使用双引号

[package.json]                      # 对 package.json 生效
indent_size = 2                     # 使用2个空格缩进

2. 文件类型图标插件 Material Icon Theme

可以让你编辑器内的不同类型文件显示不同图标，既漂亮又容易区分

3. 图标预览插件 Iconify IntelliSense

代码里的图标在写下的瞬间，就能直接转化为对应的图标在代码编辑器里面显示出来。

4. 拼写检验插件 Code Spell Checker

谁能保证没有拼写错误呢，有时候一个字母的错误让你找寻半天无解，使用此插件，即可将你的拼写错误直接展现出来。

5. AI 插件 GitHub Copilot

自动补全，帮你写代码，免费的额度也能用很久

前端专用

1. 标签自动补全 Auto Rename Tag

小而方便的功能

2. 代码规范检测和提示 ESLint

代码规范检查和提示，基本是必装了。还是一个是样式检测提示 Stylelint，也可以选择

3. 代码格式化工具 Prettier - Code formatter

大名鼎鼎的 Prettier，看不惯别人的风格就用它来格式完，修改完了直接提交。

我的部分配置

settings.json

{
  "prettier.bracketSameLine": true,
  "prettier.jsxSingleQuote": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.printWidth": 160,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

更多 Prettier 配置说明

4. TailwindCSS 提示插件 Tailwind CSS IntelliSense

TailwindCSS，用完就回不去的css库，谁用谁知道

5. 其他

ES7+ React/Redux/React-Native snippets React

Vue - Official Vue