本文介绍了我平时的 VSCode 的配置和设置,以及使用频次较多的插件。
配置文件
基础配置
{
// 保存的时候自动格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
// 使用eslint来fix,包括格式化会自动fix和代码质量检查会给出错误提示
"source.fixAll.eslint": true
},
// 默认格式化工具选择prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
其他配置
//工作区不显示以下文件夹
// "files.exclude": {
// "node_modules/": true,
// "dist/": true
},
// 显示面包屑
// "breadcrumbs.enabled": true,
Prettier 其他配置
- 配置到
setting.json
中
// prettier 配置
"prettier.trailingComma": "all",
"prettier.enable": true,
"prettier.semi": false, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 2, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab,使用空格
- 单独的配置文件
.prettierrc.js
module.exports = {
// 字符串使用单引号
singleQuote: true,
// 每行末尾自动添加分号
semi: false,
// 行尾逗号,默认none,可选 none|es5|all
trailingComma: 'all',
// 使用tab缩进,默认false
useTabs: false,
// tab缩进大小,默认为2
tabWidth: 2,
// 对象中打印空格 默认true
// true: { foo: bar }
// false: {foo: bar}
bracketSpacing: true,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
arrowParens: 'avoid',
// 换行长度,默认80
printWidth: 120,
// jsxBracketSameLine 设置为true时,将多行JSX元素的 > 放在最后一行的末尾,而不是单独放在下一行
/*
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
*/
// 设置为false时
/*
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
*/
jsxBracketSameLine: true,
endOfLine: 'auto',
}
设置
插件
HTMLCSS
Auto Close Tag (已内置)
标签。
注意:VSCode 不支持在 .vue 文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 来启用此功能。
Auto Rename Tag(已内置)
标签。
在 settings.json
文件中增加配置:
// settings.json
"editor.linkedEditing": true
JavaScript
JavaScript (ES6) code snippets
ES6 代码提示。
Vue
Vue - Official
Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 已弃用。改为使用 Vue-Official。
Fast Vue Language Support Extension.
Vue Language Features (Volar)
Vue3 支持。
打开自动填充.value
。搜索@ext:Vue.volar value
勾选,或者"vue.autoInsert.dotValue": true
重启 VSCode 。
TypeScript Vue Plugin (Volar)
TS 版的 Volar 。
Vue VSCode Snippets
vue 初始模板大全,代码片段。
Vue Peek
快速跳转组件定义和跳转路径。
element
Element UI Snippets
element-ui 提示。
element-plus-vue
vue3 的 element-plus 插件,代码片段、跳转至官方文档、标签悬浮提示、标签属性代码补全。
tailwind
Headwind
格式化 class 类名顺序。
Tailwind CSS IntelliSense
官方代码提示。
UnoCSS
UnoCSS
输入提示, 悬浮显示样式。
Iconify IntelliSense
预览图标。(并不是特地用于 UnoCSS)
Git
Git Graph
图像化查看提交记录。
Git History
查看某一样/某个文件的修改记录,
Gitlens
查看光标所在行的修改人与记录。
代码
Code Runner
运行各种代码。
ESLint
代码质量校验。
Prettier - Code formatter
代码格式化。
辅助类
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包。
Code GPT
内置 GPT 。
Code Spell Checker
英语单词拼接检查。
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Image preview
小图预览图片。
Live Server
自动刷新的本地服务器。
Todo Tree
代码注释里添加 TODO
、FIXME
、XXX
之一,后跟文本,可以在左侧生成一个 todo-list。
Trailing Spaces(已内置)
将这个配置内容添加到你的 settings.json
文件以启用自动修剪:
{
"files.trimTrailingWhitespace": true,
}
有些情况下可能希望关闭这个设置,例如使用 vscode 写 markdown 文档时,因为根据 CommonMark 规范,你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的 settings.json 文件来关闭它:
{
"[markdown]": {
"files.trimTrailingWhitespace": false
}
}
主题图标
Material Icon Theme
摸鱼
Qwerty Learner
敲单词。
首发地址:https://wu-kave.github.io/2024/my-vscode-config-and-common-plugins.html