VsCode
VsCode
settings.json
{
"editor.linkedEditing": true,
"liveServer.settings.donotShowInfoMsg": true,
"git.openRepositoryInParentFolders": "never",
"workbench.iconTheme": "vscode-icons",
// 设置背景图片位置
"backgroundCover.imagePath": "d:\\TenSoFlow\\Image\\JPEG\\Mood.jpeg",
// 删除文件时将其移至系统回收站
"files.enableTrash": true,
// 自动保存文件
"files.autoSave": "afterDelay",
// 自动猜测文件类型
"files.autoGuessEncoding": true,
// Tab键空格数
"editor.tabSize": 2,
// 字体大小
"editor.fontSize": 18,
// Tab键补全
"editor.tabCompletion": "on",
// 键入一行时自动格式化
"editor.formatOnType": true,
// 保存时自动格式化文件
"editor.formatOnSave": true,
// 粘贴代码时自动格式化
"editor.formatOnPaste": false,
// Ctrl + 滚轮缩放字体大小
"editor.mouseWheelZoom": true,
// 光标动画样式
"editor.cursorBlinking": "smooth",
// 设置字符数达到120时自动换行
"editor.wordWrapColumn": 120,
"editor.wordWrap": "wordWrapColumn",
// 平滑滚动效果
"editor.smoothScrolling": true,
"workbench.list.smoothScrolling": true,
"editor.cursorSmoothCaretAnimation": "on",
// 括号匹配
"editor.guides.bracketPairs": true,
"editor.acceptSuggestionOnEnter": "smart",
"editor.suggestSelection": "first",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"window.dialogStyle": "custom",
"debug.showBreakpointsInOverviewRuler": true,
// ESLint 管理内容为 Vue, HTML, JavaScript
"eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
// ESLint 配置文件路径
"eslint.options": {
"configFile": "./.eslintrc.js"
},
"typescript.locale": "zh-CN",
"terminal.integrated.env.windows": {},
"console-ninja.toolsToEnableSupportAutomaticallyFor": {
"live-preview-extension": true,
"live-server-extension": true
},
"console-ninja.featureSet": "Community",
"editor.renderWhitespace": "all",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"liveServer.settings.port": 5500,
"console-ninja.fontSize": 14,
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"git.autofetch": true,
"diffEditor.ignoreTrimWhitespace": true,
// 如果使用vue，ts 则这句是必需的
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"workbench.editor.wrapTabs": true,
// PowserMode-开启插件
"powermode.enabled": true,
// PowserMode-时间间隔
"powermode.combo.timeout": 0,
// PowserMode-关闭抖动
"powermode.shake.enabled": false,
// PowserMode- 烟花 fireworks 火焰 flames 爆炸 simple-rift 粒子 particles 炸裂 exploding-rift
"powermode.presets": "flames",
// PowserMode-关闭数字X
"powermode.combo.counterEnabled": "hide",
"json.schemas": [],
"vsicons.dontShowNewVersionMessage": true,
"explorer.confirmPasteNative": false,
"explorer.compactFolders": false,
"security.workspace.trust.untrustedFiles": "open",
}
插件推荐
Auto Close Tag
在你输入一个 HTML 或 XML 标签时，自动生成对应的闭合标签。
Auto Rename Tag
修改开始标签时，结束标签会自动同步修改。
background-cover
添加背景图片
Chinese(Simplified)
中文
Code Runner
支持运行当前编辑器中的代码或选中的代码片段
使用快捷键 Ctrl+Alt+N 或右键选择Run Code
Console Ninja
将 console.log 输出、运行时错误和性能指标直接显示在编辑器中，减少在浏览器开发者工具和代码编辑器之间切换的需要。
CSS Peek
快速查看和跳转 CSS/SCSS/Less 样式
把光标放在类名或ID上，按Ctrl + 鼠标左键快速跳转到对应CSS文件定义位置
Error Lens
将错误(Error)和警告(Warning)直接在代码行中用彩色背景、波浪线或文本突出显示
ESLint
检查语法错误、未定义变量、类型错误等潜在问题
GBK to UTF8 for vscode
将 GBK 编码的文件转换为 UTF-8 编码
当你打开 GBK 编码的文件时，插件会自动弹出提示框，询问是否将文件转换为 UTF-8 编码
HTML CSS Support
在 HTML 文件中输入 class=" 或 id=" 时，插件会根据项目中已有的 CSS/SCSS/Less 文件自动提供补全提示
Image preview
在编辑器中直接预览图片
Live Server
实时预览网页，无需手动刷新浏览器。
open in browser
快速在浏览器中打开当前文件或项目
Path Autocomplete
在代码中快速自动补全文件路径
在字符串中输入文件路径（如 "./images/" 或 "../components/"）时，插件会根据项目目录实时提供补全建议
Power Mode
每次敲击键盘时，屏幕会产生火花、流光、爆炸等粒子动画效果
Prettier - Code formatter
代码格式化
Template String Converter
快速在普通字符串和模板字符串之间转换，插件仅支持 JS/TS 文件，不支持其他语言
Vetur
主要面向vue2项目
为 .vue 文件中的 template、script、style 提供准确的语法高亮
支持 HTML 标签、属性、事件、组件名自动补全
JavaScript / TypeScript 代码智能提示
提供 Vue 常用语法片段，比如 v-for、v-if、v-model 等
Vue(Official)
主要面向vue3项目
为 .vue 文件中的 template、script、style 提供准确的语法高亮
支持 HTML 标签、属性、事件、组件名自动补全
JavaScript / TypeScript 代码智能提示
提供 Vue 常用语法片段，比如 v-for、v-if、v-model 等
vscode-element-helper
输入 <el- 就能自动补全 Element UI 组件
支持组件的 props、事件(@event)、插槽(slot) 智能提示
鼠标悬停在组件属性或事件上时，自动显示对应的官方文档说明
vscode-icons
文件图标主题插件，为不同类型的文件和文件夹显示直观的图标，让项目目录更清晰、美观
CodeSnap
非常好看的代码截图插件