VS Code 开发统一代码格式化配置
eslint: 是用来做代码风格检查的,比较关注代码质量,并且会提示不符合风格规范的代码,也有一部分代码格式化的功能。不是消除空行。
"editor.formatOnSave": false, // true 每次保存时自动格式化;false 代码格式化 shift+alt+F
"eslint.autoFixOnSave": true, // 设置保存时自动修复
"eslint.validate": ["vue","html","javascript","typescript"] // 配置eslint对 vue文件及html文件的 风格提示
prettier :本身是用来做代码格式化的,可以补充eslint 的缺陷
"prettier.semi": false, // 去掉代码结尾的分号
"prettier.singleQuote": true, // 设置强制单引号
vue文件格式化配置 (Vetur) 该插件大多是直接使用的 prettier 规范。
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // vue 格式化
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto" // html 标签属性 换行设置不换行
}
},
个人配置:
{
// ... 原有配置
"editor.minimap.enabled": false, // 控制是否显示缩略图
"git.autorefresh": true, // git 工作空间刷新
"breadcrumbs.enabled": true, // 开启vscode 文件路径导航
"editor.tabSize": 4, //配置代码缩进为 一个tab = 4个空格
"editor.detectIndentation": false, // vscode 默认启用了根据文件类型自动设置tabsize的选项
"editor.formatOnSave": true, // true 每次保存时自动格式化;false 代码格式化 shift+alt+F
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // vue 格式化
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto" // html 标签属性 换行设置不换行
}
},
"prettier.printWidth": 300, // 超过最大值换行
"search.exclude": {
"**/node_modules": true // 全文搜索功能快速排出文件/文件夹
},
"files.exclude": { // 这些文件将不会显示在工作空间中
"**/.DS_Store": true,
"**/.gitignore": true,
"**/node_modules": true
},
"search.followSymlinks": false, // CPU利用率100%的情况
"editor.tabCompletion": "on", // 出现推荐值时,按下Tab键是否自动填入最佳推荐值
"editor.lineNumbers": "on", // 显示左侧代码行数
"explorer.confirmDelete": true, // 控制资源管理器 删除文件时,是否进行确认
"workbench.sideBar.location": "left", // 控制侧边栏的位置
"editor.largeFileOptimizations": false, // 对大型文件进行特殊处理,禁用某些内存密集型功能
}
VS code 插件:
View In Browser:在浏览器里预览网页必备。运行html文件
Bracket Pair Colorizer: 给嵌套的各种括号加上不同的颜色。
Auto Rename Tag : 自动修改匹配的 HTML 标签。
Path Intellisense: 智能路径提示,可以在你输入文件路径时智能提示。
Turbo Console Log: 快捷添加 console.log ctrl + alt + l
css-auto-prefix: 自动添加 CSS 私有前缀。
vscode-json : 处理 JSON 文件
Regex Previewer: 实时预览正则表达式的效果。
Image Preview:快速预览HTML中的图片
VS Code Counter: 查看代码
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构