常用vscode配置和插件

常用vscode配置和插件

VSCode（全称：Visual Studio Code）是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。它内置了对 JavaScript，TypeScript 和 Node.js 的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。VSCode 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT 命令 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

• 官网地址：https://code.visualstudio.com
• 官方文档地址：https://code.visualstudio.com/docs

常用vscode配置

设置方法： vscode => Code => 首选项 => 设置

点击如下图按钮，打开settings.json，进行json配置

settings.json：

{
  "typescript.locale": "zh-CN",
  "editor.quickSuggestions": {
    // 控制键入时是否应自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0, // 调整窗口的缩放级别。原始大小是 0
  "editor.fontSize": 14, // 显示的字体大小
  "editor.tabSize": 2, // tab锁紧二个空格
  "editor.insertSpaces": true, // 按Tab时是插入空格
  "files.autoSave": "onFocusChange", // 控制已更新文件的自动保存,"onFocusChange" (编辑器失去焦点)
  "editor.wordWrap": "on", // 是否一行太长自动换行
  "emmet.triggerExpansionOnTab": true, // 是否启用Emmet展开缩写
  "editor.renderWhitespace": "all", // 空格变成...
  "eslint.validate": [
    // eslint配置
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "prettier.singleQuote": true, // 使用单引号
  "workbench.iconTheme": "material-icon-theme",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "tslint.alwaysShowRuleFailuresAsWarnings": true,
  "editor.formatOnPaste": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "alias-skip.mappings": {
    "@": "/src"
  },
  "stylusSupremacy.insertColons": true, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": true, // 是否插入分好
  "stylusSupremacy.insertBraces": true, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true, // 两个选择器中是否换行
  "eslint.nodeEnv": "development",
  "eslint.codeAction.showDocumentation": {
    "enable": false
  },
  "bracketPairColorizer.depreciation-notice": false
}

常用vscode插件

• Chinese (Simplified) ：中文（简体）语言包

• ESLint：ESLint插件，JavaScript和JSX检查工具

• Auto Close Tag：自动补全结束标签

• Auto Rename Tag：自动匹配修改的HTML标签

• Beautify：格式化代码

• Beautify css/sass/scss/less：格式化css/sass/scss/less

• Bracket Pair Colorizer：为代码中的结对的括号提供颜色高亮

• EditorConfig for VS Code：EditorConfig插件，定义和维护代码风格

• HTML CSS Support：css提示

• Vetur：vue插件

• GitLens：显示最近的commit信息和作者

• Code Runner：运行选中的代码段

• Image preview：图片预览，支持css预览，支持svg格式

• IntelliSense for CSS class names in HTML：css类名智能提示

• JavaScript (ES6) code snippets：ES6语法的JavaScript代码片段

• language-stylus：stylus插件

• Material Icon Theme：自定义文件夹图标关联

• Prettier - Code formatter：代码格式化

• Prettify JSON：json格式化

• npm Intellisense：已安装模块名称提示

• Path Intellisense：路径提示

• stylus supremacy：stylus插件

• vscode-styled-jsx：jsx高亮

• vscode-styled-jsx-languageserver：jsx插件，作者Divlo

• Project Manager：项目管理，快速切换项目，进入项目后，点击如下图操作保存项目