常用插件

整理下 VSCode 常用插件，可以帮助提高工作效率

美化相关

Chinese (Simplified) Language Pack for Visual Studio Code

插件地址 适用于 VS Code 的中文（简体）语言包

Material Icon Theme

插件地址 图标美化插件

开发相关

Auto Close Tag

插件地址 可以快速帮你完成 HTML 标签的闭合

Auto Rename Tag

插件地址 假如你要把 div 修改为 section，不需要再把 <div> 然后找到代码尾部的 </div> 才能修改，只需要选中前面的半个标签，直接修改

Dart & Flutter

插件地址 Dart 语言支持

插件地址 Flutter 语言支持

Eggjs & Eggjs dev tools

对阿里云推出的 Eggjs 框架提供开发与调试支持

插件地址 Eggjs

插件地址 Eggjs dev tools

ESLint

插件地址 最初是由Nicholas C. Zakas于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。更详尽的参考 ESlint中文网

GitLens

插件地址 快速了解更改行或代码块的人员、原因和时间，方便查看git记录

Import Cost

插件地址 在编辑器中内联显示导入包的大小

Kotlin Language

插件地址 为查看 Kotlin 语言提供支持

Prettier

插件地址 它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式，并在必要时包装代码。如今，它已成为解决所有代码格式问题的优选方案；支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言，这里我们需要让Prettier和Eslint结合，检测代码中潜在问题的同时，还能统一团队代码风格，从而促使写出高质量代码，来提升工作效率。我们要的不仅是检测问题，还有就是自动修复问题。

Vetur

插件地址 优秀的vue开发插件，具有如下特征，更详尽的参考 官方文档

• 语法高亮
• Snippet
• Emmet
• 错误检测
• 格式化
• 智能感知

Volar

插件地址 更优秀的vue3开发插件，与Vetur不可同时开启

Vue VSCode Snippets

插件地址 快速的自动补全Vue相关代码片段

别名路径跳转

链接地址 方便的跳转到文件地址

常用配置

{
    "breadcrumbs.enabled": true, // 是否开启面包屑导航
    "diffEditor.ignoreTrimWhitespace": false,

    "docthis.authorName": "lzan13",
    "docthis.includeMemberOfOnInterfaceMembers": false,
    "docthis.includeMemberOfOnClassMembers": false,

    // 编辑器文本大小
    "editor.fontSize": 10,
    // 每次保存自动格式化
    "editor.formatOnSave": true,
    // 控制编辑器在键入一行后是否自动格式化该行
    "editor.formatOnType": true,
    // 行数提示 on-开 off-关
    "editor.lineNumbers": "on",
    // 快速预览是否开启
    "editor.minimap.enabled": true,
    // 快速预览宽度
    "editor.minimap.maxColumn": 72,
    "editor.minimap.renderCharacters": false,
    // 快速保存前延迟
    "editor.quickSuggestionsDelay": 50,
    // 编辑器格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 自动更新html标签
    "editor.linkedEditing": true,
    // 控制代码片段是否与其他建议一起显示及其排列的位置
    "editor.snippetSuggestions": "top",
    "editor.multiCursorModifier": "alt",
    // 自动显示建议
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // Tab 补全
    "editor.tabCompletion": "onlySnippets",
    // tab宽度
    "editor.tabSize": 4,
    // 用空格键代替tab
    "editor.insertSpaces": true,
    // 控制是否在打开文件时，基于文件内容自动检测 #editor.tabSize# 和 #editor.insertSpaces#。
    "editor.detectIndentation": false,
    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,
    "editor.formatOnPaste": true,
    "editor.fontWeight": "bold",
    "editor.autoIndent": "full",
    "editor.wordWrap": "on",
    "editor.fontFamily": "Monaco, 'Courier New', monospace",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.stickyTabStops": true,
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "editor.unicodeHighlight.invisibleCharacters": false,

    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        "wxml": "html"
    },

    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,

    "files.autoSave": "onFocusChange",
    "files.associations": {
        "*.vue": "vue",
        "*.wpy": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },

    // git 配置
    "git.autofetch": false,
    "git.enableSmartCommit": false,
    "git.confirmSync": false,

    // 启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能。always: 始终自动更新路径。
    "javascript.updateImportsOnFileMove.enabled": "always",

    // prettier 配置
    "prettier.enable": true, // 启用 prettier
    "prettier.bracketSpacing": true, //
    "prettier.semi": false, // 分号结尾
    "prettier.singleQuote": false, // 强制单引号
    "prettier.singleAttributePerLine": true, // 属性换行
    "prettier.tabWidth": 4, // tab大小
    "prettier.trailingComma": "none", // 数组结尾逗号
    "prettier.printWidth": 150, // 最大宽度

    /**
     * 控制如何处理在受信任的工作区中打开不受信任的文件
     * 此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。
     * open: 始终允许不受信任的文件引入受信任的工作区，而不显示提示。
     */
    "security.workspace.trust.untrustedFiles": "open",
    "settingsSync.ignoredExtensions": [],

    // 终端配置
    "terminal.external.osxExec": "/Applications/iTerm.app",
    "terminal.integrated.fontSize": 12,

    "typescript.updateImportsOnFileMove.enabled": "always",

    // 是否展示欢迎页
    "workbench.startupEditor": "welcomePage",
    // 文件图标主题
    "workbench.iconTheme": "material-icon-theme",
    // 高亮显示修改的Tab
    "workbench.editor.highlightModifiedTabs": true,
    // 侧边栏位置
    "workbench.sideBar.location": "left",
    // 主题颜色
    "workbench.colorTheme": "Default Dark+",
    // 自定义颜色
    "workbench.colorCustomizations": {
        "statusBar.background": "#363636",
        "statusBar.foreground": "#69df69"
    },

    /**
     * 各个语言格式化配置
     */
    // css 格式化配置
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // html 格式化配置
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // JavaScript 格式化配置
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // Json 格式化配置
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // scss 格式化配置
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // TypeScript 格式化配置
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // Vue 格式化配置
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "workbench.editor.splitInGroupLayout": "vertical",
    "window.zoomLevel": 1
}