常用vscode配置和插件

·  阅读 202

常用vscode配置和插件

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

常用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:项目管理,快速切换项目,进入项目后,点击如下图操作保存项目

    在这里插入图片描述

分类:
前端
收藏成功!
已添加到「」, 点击更改