VSCode

• Plugins
• Setting
• 资料

Plugins

TIP

下列是前端开发者常用的的一些插件，已经经过筛选整理，可以对应自己熟悉的技术栈自行选择。

插件名	作用
Auto Close Tag	自动闭合 HTML/XML 标签
Auto Import	自动导入模块
Auto Rename Tag	自动完成另一侧标签的同步修改
Axios Snippets	axios 语法提示
Beautify	格式化 支持自定义格式化代码规则
Better Comments	文件注释
Bookmarks	添加行书签
Bracket Pair Colorizer	给括号加上不同的颜色，便于区分不同的区块
BreadCrumb in StatusBar	编辑器底部显示当前文件面包屑
Can I Use	HTML5、CSS3、SVG 的浏览器兼容性检查
Chinese(Simplified) Language	编辑器汉化
Class autocomplete for HTML	智能提示 HTML class
Code Runner	运行选中代码段（支持大量语言，包括 Node）
Color Highlight	颜色值在代码中高亮显示
Color Picke	拾色器
csscomb	css 排序格式化
Css peek	追踪至样式表中 CSS 类和 ID 定义的地方
Debugger for Chrome	映射 vscode 上的断点到 chrome 上，方便调试
Document This	Js 的注释模板
Docker	编辑器支持识别 doker 语法
EditorConfig for vs code	协同办公， 保持编码风格的一致
ES7 React/Redux...	react,GraphQL,react-native 代码段
EsLint	es 语法纠错，可以自定义配置
File Peek	根据路径字符串，快速定位到文件
filesize	在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
Font-awesome codes	font-awesome 字体库提示
Git Blame	在状态栏显示当前行的 Git 信息
Git History	方便查看 git 日志，git 重度使用者必备
GitLens	显示文件最近的 commit 和作者，显示当前行 commit 信息
Guides	高亮缩进基准线
Gulp Snippets	Gulp 智能提示代码段
HTML CSS Support	css 提示（支持 vue）
HTML Snippets	智能提示 HTML 标签，以及标签含义
HTMLHin	HTML 语法纠错
htmltagwrap	html 标签快捷键包裹
indent-rainbow	会给缩进添加一种颜色,更加直观的看到代码层次
Indenticator	缩进高亮
Import Cos	引入包大小计算,对于项目打包后体积掌握很有帮助
IntelliSense for Css class names in HTML	智能提示 css 的 class 名
JavaScript (ES6) code snippets	ES6 语法智能提示
JavaScript snippet Pack	一个片段包
JavaScript standardjs styled snippets	statard 风格的代码段提示
jQuery Code Snippets	jQuery 代码智能提示
Json Editor	折叠格式化
Json Helper	提供大纲功能,可以快速跳转编辑
language-stylus	支持 stylus
Live HTML Previewer	html 文件运行预览
Live Server	启服务，可配置编辑
Lodash Snippets	Lodash 代码段
Manta's Stylus Supremacy	stylus 语法识别和风格编辑
Markdown Preview Enhanced	实时预览 markdown
markdownlint	markdown 语法纠错
minapp	小程序语法提示
minify	压缩合并 JavaScript 和 CSS 文件
mpvue snippets	mpvue 代码段提示
Node.js Modules Intellisense	可以在导入语句中自动完成 JavaScript / TypeScript 模块
Node modules resolve	快速导航到 Node 模块
npm	运行 npm 命令
npm Intellisense	导入模块时，提示已安装模块名称
open in browser	支持快捷键与鼠标右键快速在浏览器中打开 html 文件
Output Colorizer	颜色输出信息
Partial Diff	diff 文件比较
Path Autocomplete	自动完善路由
Path Intellisense	自动提示文件路径，支持各种快速引入文件
Polacode	代码截图导出
Prettier -Code formmatter	代码格式化程序
Prettify JSON	格式化 JSON
Project Manager	快速切换项目
Projects+	项目管理必备插件,可以快速录入本地项目的地址,打开
Quokka.js	调试工具插件，能够根据你正在编写的代码提供实时反馈。
React Native Tools	可以进行断点调试 React Native
React-Native/React/Redux snippets	React/Redux/react-router 语法智能提示
REST Client	发送 REST 风格的 HTTP 请求
Sass	sass 支持
Settings Sync	VSCode 设置同步到 Gist
Sort lines	排序选中行
SVG Viewer	SVG 预览
TODO Hignlight	Todo 高亮
TODO Parser	Todo 管理
TSLint	ts 语法纠错
Typings Installer	增加扩展自动补全功能
TypeScript Importer	自动搜索工作区文件中的 TypeScript 定义，并将所有已知符号作为完成项，以允许代码完成
Version Lens	依赖包文件显示模块当前版本和最新版本
Vetur	语法高亮、智能感知、Emmet 等
Vetur E	配合 TouchUI 工具
View In Browser	内置浏览器预览
vscode-faker	生成假数据,地址,电话,图片等等
vscode-fileheader	在文件前边添加注释，作者、日期等
vscode-icons	文件图标主题
Vue 2 Snippets	Vue2.x 片段补全工具
Vue Peek	Vue 里的路径跳转
Vue TypeScript Snippets	Vue 里的 TS 代码段提示
wpy-beautify	wepy 单文件格式化

Setting

WARNING

下面这份是我目前使用的 vscode 配置，有些参数可能需要对应的插件才生效。另外强烈安利安装使用 setting sync插件，该功能可以将 vscode 的插件和配置同步上传到 git 服务器，以免更换机器后又要做这种比较繁琐的事情。具体操作可以参考三分钟教你同步 Visual Studio Code 设置。

{
  /*编辑器设置*/
  "editor.tabSize": 2,
  "editor.fontSize": 16,
  "editor.fontFamily": "Menlo,Consolas, monospace",
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.renderIndentGuides": false,
  "editor.suggestSelection": "first",
  // "editor.snippetSuggestions": "none",

  /*工作区设置*/
  "workbench.activityBar.visible": true,
  "workbench.editor.enablePreview": false,
  "workbench.colorTheme": "Dracula",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "vscode-icons",

  "window.titleBarStyle": "custom",
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  /*文件关联*/
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/.cache": true,
    "**/.vscode": true
  },
  "files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.wxml": "html",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.js": "javascriptreact"
  },
  "files.autoSave": "onFocusChange",
  "files.insertFinalNewline": true,

  // 设置文件头部注释
  "fileheader.Author": "KyleWang",
  "fileheader.LastModifiedBy": "KyleWang",

  /* 设置ESlint*/
  "eslint.autoFixOnSave": true, //保存自动修复
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx"],
    "plugins": ["html"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "vue-html",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],

  // TS设置
  "javascript.implicitProjectConfig.experimentalDecorators": true,

  /*格式化vue*/
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // 属性换行，可以换成任意一种 [auto|force|force-aligned|force-expand-multiline] ["auto"]
    }
  },

  "prettier.eslintIntegration": true,
  "prettier.semi": false, // 每一行末尾加上分号
  "prettier.singleQuote": true, // 用单引号
  "prettier.printWidth": 200, // 换行字符串阈值
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "none", // (x) => {} 是否要有小括号
  "prettier.stylelintIntegration": true,

  "stylelint.enable": false,

  /*格式化stylus*/
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  // Toggle matches for Stylus Builtin Functions on autocomplete
  "languageStylus.useBuiltinFunctions": true, // default value

  /*设置Git相关*/
  "git.path": "D:\\Program Files\\git\\bin\\git.exe",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true,
    "suppressUpdateNotice": true
  },
  "git.ignoreMissingGitWarning": true,
  "gitlens.keymap": "alternate", //删除文件是否弹出系统资源管理器的删除提示框
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.views.lineHistory.enabled": true,

  "search.exclude": {
    // 搜索过滤掉
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "extensions.autoUpdate": true, //自动更新扩展
  //默认的终端启动器
  "terminal.integrated.shell.windows": "D:\\Program Files\\git\\bin\\bash.exe",

  /*设置同步*/
  "sync.gist": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.forceDownload": false,
  "sync.quietSync": false,
  "sync.askGistName": false,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true,

  // 其它配置
  "material-icon-theme.folders.theme": "none",
  "material-icon-theme.showUpdateMessage": false, //禁止图标更新弹出更新信息
  "vsicons.dontShowNewVersionMessage": true, //禁止图标更新弹出更新信息
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "[javascript]": {},
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "breadcrumbs.enabled": true,
  "scm.alwaysShowActions": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

资料

• vscode 下载