VSCode 指南

文档维护人： 木木(linqh@authine.com)、赤红(yangjh@authine.com)

• 前言
• 官网
• 插件集推荐
• 契合项目调整
  • 格式化及校验
  • 项目管理
  • 智能提示
  • 代码提交及注释
  • 编码体验
  • 编辑器设置

前言

公司主推VSCode作为前端小伙伴的开发工具，因为该编辑器灵活，生态圈完善。

对JS/TS天生友好，而且不仅仅可以用于前端相关的开发。

可能有部分习惯了JB Webstorm,不强制更换,萝卜青菜各有所爱。

官网

https://code.visualstudio.com/

插件集推荐

VS Code 折腾记系列

契合项目调整

以下这么几款插件可以说是前端的必需品，可以大大改善编码体验。

格式化及校验

ES Lint

使你的代码质量提升一个层次的东东，规则有内置也可以通过项目的配置文件读取,开启自动修正

Prettier

支持多种语言的格式化工具，可以从配置文件或者默认配置去格式化对应的文件

stylelint

样式的校验，提高代码质量

项目管理

Project Manager

可以记录项目的路径，创建别名，快速切换，很实用。

Git Graph

可以快速查看 git的提交记录，文件差异，高频使用！

智能提示

Path Autocomplete

路径的智能提示，高频使用

npm Dependency Links

可以快速直达package.json内项目依赖的对应主页

Vue VSCode Snippets

Vue代码片段的快速提示，可以提升编码体验

Vetur

写 Vue 的必备插件，支持语法高亮，校验，智能提示，调试等

Visual Studio IntelliCode

微软出品的代码推断，基于深度学习，多种语言支持

代码提交及注释

Better Comments

让注释更加直观，阅读更赏心悦目

Visual Studio Code Commitizen Support

可以快速生成Angular提交规范的 commit（交互式生成），git cz的另一种展示

编码体验

Vim

VIM这个神器，用习惯的都说好

Test Explorer UI

支持多种测试框架，让测试的调用一步到位

编辑器设置

VSCode 设置

里面已经尽可能的删除了其他一些插件的配置，只保留了上面推荐插件及内置允许配置的

若是还有部分出现下划线的，不影响使用，VS Code会自动跳过该设置

以下配置是个人实践推荐配置，期待各位补充；

{
  /* 以下是样式配置，可自定义，不强制统一 */
  // 编辑器字体配置
  "editor.fontFamily": "'Cascadia Code','Fira Code',\"Source Han Sans CN\", \"Source Han Sans\",'SF Mono',Menlo,'Source Code Pro',Hack,mononoki,Consolas, 'Courier New', monospace",
  // 编辑器字体大小
  "editor.fontSize": 14,
  // 文字行高
  "editor.lineHeight": 25,
  // 文字间距
  "editor.letterSpacing": 0.5,
  // 文字是否开启连字变体
  "editor.fontLigatures": true,
  // 光标闪烁动效，加smooth添加渐隐渐显动效
  "editor.cursorBlinking": "smooth",
  // 光标样式，默认就是line，可以改变光标的粗细大小；也可改成underline,变成命令行式的光标；
  "editor.cursorStyle": "line",
  // 光标位置平滑动效
  "editor.cursorSmoothCaretAnimation": true,
  // 文字是否换行
  "editor.wordWrap": "on",
  // 配合wordWrap配置wordWrapColumn，设置字数
  "editor.wordWrapColumn": 120,
  // 光标多选
  "editor.multiCursorModifier": "alt",
  // 代码片段如何显示，及如何排序
  "editor.snippetSuggestions": "top",
  // 快速提示及建议，延迟多少毫秒显示
  "editor.quickSuggestionsDelay": 50,
  // 是否开启编辑器tab键的自动完成
  "editor.tabCompletion": "on",
  // 平滑滚动
  "editor.smoothScrolling": true,
  // 在macOs中，是否与find共用剪切板
  "editor.find.globalFindClipboard": true,
  // 输入过程中是否执行格式化
  "editor.formatOnType": false,
  // 代码保存时执行
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "editor.minimap.renderCharacters": false,
  // suggest 是否在多个编辑器中共享
  "editor.suggest.shareSuggestSelections": true,
  /* 编辑器样式配置结束 */
    // 大纲前面显示图标
  "outline.icons": true,
  // 资源目录中拖拽文件，是否弹出提示
  "explorer.confirmDragAndDrop": false,
  // git 同步远程仓库时，是否提示确认
  "git.confirmSync": true,
  // git 当暂存区没有文件时，自动将所有非暂存文件，提交上去
  "git.enableSmartCommit": true,
  // 在编辑器中扩展语言对emmet语法对支持，查看下面链接了解详情
  // https://code.visualstudio.com/docs/editor/emmet
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascriptreact": "html",
  },
  // emmet 当按下tab键，emmet简写将被展开
  "emmet.triggerExpansionOnTab": true,
  // 以代码块作为提示，依赖配置：editor.snippetSuggestions
  "emmet.showSuggestionsAsSnippets": true,
  // 是否开启grunt tasks的自动检测
  "grunt.autoDetect": "off",
  // 是否开启jake tasks的自动检测
  "jake.autoDetect": "off",
  // 搜索默认排除的目录
  "search.exclude": {
    "**/dist": true
  },
  // vetur 插件的格式化配置, 查看下方链接了解更多
  // https://vuejs.github.io/vetur/
  "vetur.format.defaultFormatterOptions": {
    "html": "prettyhtml",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier-eslint",
    "ts": "prettier",
  },
  // 是否校验vue template
  "vetur.validation.template": true,
  // 跟踪编辑器与对应语言服务器之间的通信。
  "vetur.trace.server": "messages",
  "json.trace.server": "messages",
  "html.trace.server": "messages",
  // 在终端选中时，是否复制文本
  "terminal.integrated.copyOnSelection": true,
  // 终端文字字间距
  "terminal.integrated.letterSpacing": 2,
  // 终端文字字体字重配置
  "terminal.integrated.fontWeightBold": "normal",
  // 终端，在macOs上运行终端使用的shell路径：
  // 可选bash：/bin/bash
  "terminal.integrated.shell.osx": "/bin/zsh",
  // 终端文字字体
  "terminal.integrated.fontFamily": "'Cascadia Code','Fira Code',\"Source Han Sans CN\", \"Source Han Sans\",'SF Mono',Menlo,'Source Code Pro',Hack,mononoki,Consolas, 'Courier New', monospace",
  // 自定义终端的运行程序，默认是Terminal.app
  // 可自行安装Terminus：https://eugeny.github.io/terminus/
  "terminal.external.osxExec": "terminus.app",
  // 当没有顶层package.json的时候，是否开启目录视图
  "npm.enableScriptExplorer": true,
  // 扩展程序是否自动更新
  "extensions.autoUpdate": false,
  // 文件自动保存，推荐开启，当窗口失去焦点时，会自动保存
  "files.autoSave": "onWindowChange",
  // 文件或窗口推出后，未保存的文件是否保留
  "files.hotExit": "onExitAndWindowClose",
  // 默认的文件类型
  "files.defaultLanguage": "javascript",
  // 大文件分配内存限制，视个人硬件条件而定
  "files.maxMemoryForLargeFilesMB": 8192,
  // 排除一些文件
  "files.exclude": {
    "**/.idea": true,
    "**/.vscode": true,
    "**/tmp": true
  },
  // 排除一些文件的文件变动监控
  "files.watcherExclude": {
    "**/dist/**": true
  },
    // 搜索是否可读写全局搜索剪切板
  "search.globalFindClipboard": true,
  "search.runInExtensionHost": true,
  // 搜索时显示行号
  "search.showLineNumbers": true,
  "scm.diffDecorations": "gutter",
  // nodejs开启自动调试
  "debug.node.autoAttach": "off",
  // 是否开启screen reader的适配，适用于视力障碍人群
  "editor.accessibilitySupport": "off",
  // 文件面包屑是否开启
  "breadcrumbs.enabled": true,
  // typescript的interface实现和引用计数的反查
  "typescript.implementationsCodeLens.enabled": true,
  // typescript本地化语言包
  "typescript.locale": "zh-CN",
  // typescript的方法和变量的引用计数查询，javascript同理
  "typescript.referencesCodeLens.enabled": true,
  "javascript.referencesCodeLens.enabled": true,
  // 在js中，当导入导出路径发生变化，是否自动更新路径，在ts中也有一个选项与之对应；
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  // 可见的打开编辑器的数量
  "explorer.openEditors.visible": 6,
  // 是否显示控制按键字符编码
  "editor.renderControlCharacters": true,
  // 当搜索时，是否忽略.gitignore或.ignore文件中忽略的文件
  "search.useGlobalIgnoreFiles": true,
  // 终端中光标是否闪烁
  "terminal.integrated.cursorBlinking": true,
  // 终端使用dom渲染还是canvas渲染
  "terminal.integrated.rendererType": "canvas",
  // 命令行命令历史记录保存多少条
  "workbench.commandPalette.history": 50,
  // 是否默认在扩展程序商店显示推荐程序
  "extensions.showRecommendationsOnlyOnDemand": true,
  // 要求prettier 必须存在一个配置文件
  "prettier.requireConfig": true,
  "search.quickOpen.includeSymbols": true,
  // 是否开启保存时自动格式化
  "editor.formatOnSave": false,
  // stablePeek
  "editor.stablePeek": true,
  "files.autoSave": "onWindowChange",
  // 最多识别多少个git 子模块
  "git.detectSubmodulesLimit": 20,
  // git push成功是否给出提示
  "git.showPushSuccessNotification": true,
  // 是否高亮显示编辑过的tab
  "workbench.editor.highlightModifiedTabs": true,
  // 在macOs中是否开启原生窗口tab
  "window.nativeTabs": true,
  // 是否一直显示header action
  "workbench.view.alwaysShowHeaderActions": true,
  // 当暂存区没有文件时，是否还显示暂存区分组
  "git.alwaysShowStagedChangesResourceGroup": true,
  // 是否去除尾部空格
  "files.trimTrailingWhitespace": true,
  // 源码管理中是否显示远程git服务器分组
  "scm.alwaysShowProviders": true,
  // 工作区文件删除后，是否关闭tab
  "workbench.editor.closeOnFileDelete": false,
  // ？
  "workbench.editor.revealIfOpen": true,
  // 在编辑器中修改Setting.json的时候，是否分割对照显示
  "workbench.settings.useSplitJSON": true,
  // 窗口标题
  "window.title": "${rootName}${separator}${activeFolderLong}",
  // html元素中<head>和<body>元素中有缩进
  "html.format.indentInnerHtml": true,
  // prettier 忽略的语言类型
  "prettier.disableLanguages": [],
  // 调试结束后，显示资源管理器视图
  "debug.openExplorerOnEnd": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
  "[markdown]": {},
  // 是否启用试验性功能
  "gitlens.insiders": true,
  // 是否一直显示eslint状态栏
  "eslint.alwaysShowStatus": true,
  // 图标主题
  "workbench.iconTheme": "vscode-great-icons",
  // 打开的编辑器是否在tab中显示
  "workbench.editor.showTabs": true,
  // 是否渲染树形结构的缩进提示
  "workbench.tree.renderIndentGuides": "always",
  // projectManager 插件分组列表
  "projectManager.groupList": true,
  // 忽略git legacy警告
  "git.ignoreLegacyWarning": true,
  // 是否启用对话框来替换系统原生的对话框
  "files.simpleDialog.enable": true,
  // js校验
  "javascript.validate.enable": false,
  // 是否开启缩进检测，右下角有类型提示
  "editor.detectIndentation": true,
  // Tab 相当于几个空格
  "editor.tabSize": 2,
  // 粘贴时格式化，关闭，使用插件的格式化
  "editor.formatOnPaste": false,
  // jsx支持emmet
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  // eslint校验语言
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 是否开启试验性功能，装饰器的支持
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  // 缩放等级
  "window.zoomLevel": 1,
  // diff编辑器视图中，是否忽略空白格
  "diffEditor.ignoreTrimWhitespace": false,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": true
  },
  // 是否开启lintTask
  "eslint.lintTask.enable": true,
  "workbench.fontAliasing": "auto",
  // Git Graph插件的时间格式
  "git-graph.dateFormat": "ISO Date & Time",
  // eslint 保存时自动格式化
  "eslint.autoFixOnSave": true,
}

EditorConfig

推荐设置

根目录下创建.editorconfig来保证

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true