实用的VSCode 插件和配置推荐（更新）

上一篇系列文章：实用的VSCode 插件和配置推荐
没错！！我的喜好又变了（男人总是喜新厌旧），前端一直在进步，咱的眼光也得与时俱进不是。好看编辑器风格总能让人心情愉悦，代码敲得飞起。

先上外观

配置settings.json

{
    "editor.fontSize": 14, // 字号
    "editor.fontFamily": "Fira Code,  Menlo, Monaco, 'Courier New',monospace", //字体
    "editor.lineHeight": 22, // 行高
    "editor.wordWrap": "bounded", // 折行方式
    "editor.formatOnSave": true,
    "editor.unicodeHighlight.ambiguousCharacters": false, // 取消中文标点高亮
    "editor.trimAutoWhitespace": false, // 不要删除换行的自动缩进
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "editor.renderWhitespace": "all", // 显示空白字符
    "editor.guides.bracketPairs": true, // 开启带颜色的缩进线
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.minimap.enabled": false,
    "editor.formatOnSaveMode": "modificationsIfAvailable",

    "workbench.tree.indent": 10, // 文件树缩进层级距离
    "workbench.iconTheme": "material-icon-theme", // 文件图标主题
    "workbench.productIconTheme": "icons-carbon",
    "workbench.colorTheme": "Solarized Light",
    "workbench.startupEditor": "none",
    "prettier.printWidth": 120, // 控制代码的长度限制
    "prettier.tabWidth": 4,
    // "prettier.useTabs": true, //是否使用（制表符/空格）缩进
    "files.autoSave": "afterDelay", // 开启文件自动保存
    "explorer.confirmDelete": false, //控制删除文件是否需要确认
    "files.exclude": {
        // 添加需要隐藏的文件或目录
        ".idea": true
    },
    "search.exclude": {
        // 将一些不必要的搜索范围去掉
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true,
        "**/.git": true
    }
}

配置中涉及的插件

1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code中文语言包
2. Vue - Official（Vue3推荐）
   Vue3的IDE插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。
3. Vue 3 Snippets（Vue3推荐）
   提供代码片段，语法高亮和格式化的 VS Code 插件
4. Vetur（Vue2推荐）
5. EditorConfig for VS Code
   用于支持 .editorconfig 配置规范
6. Prettier - Code formatter
   代码格式化插件
7. open in browser
   编辑器一键运行html文件
8. GitHub Theme
   GitHub主题风格
9. Material Icon Theme
   文件图标主题
10. Auto Close Tag
    自动添加 HTML/XML 关闭标记
11. Auto Rename Tag
    重命名html或者组件标签时，会同步更改结束标签
12. Code Snapshot
    代码截图
13. Code Spell Checker
    帮助你检查英文单词的拼写错误
14. DotENV
    可优化.env文件的显示效果
15. ESLint
    代码规范插件，用于项目中引入了ESLint时可进行代码校验
16. GitLens — Git supercharged
    丰富的Git日志插件
17. Image preview
    图片预览，可以在代码行号左侧槽位(或hover时)预览图片。
18. Path Intellisense
    智能路径补全
19. Rainbow Brackets 2
    为匹配的括号添加颜色，以便更轻松地阅读代码
20. Template String Converter
    "${" 此扩展在键入时将字符串转换为模板字符串
21. Toggle Quotes
    作用是转换引号的，可以在 "",''和``之间相互转换，并且是成对转换的。默认快捷键（可改）：win: ctrl + ', mac: cmd + '
22. Version Lens
    显示包版本信息，在 package.json 中显示包最新版本等信息
23. Vue Peek
    允许快速跳转或浏览作为组件（从模板）或模块导入（从脚本）引用的文件