是时候提高你的编码效率了【VSCode篇】

最新推荐文章于 2022-03-28 21:08:19 发布

石燕平_Leo

最新推荐文章于 2022-03-28 21:08:19 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/qq_36376434/article/details/96671294

版权

俗话说得好，工欲善其事必先利其器，要想工作效率高，码代码的工具用的好是必须的，这里主要说一下 Mac 上 VScode 的快捷键，帮助大家快速搭建良好的开发工具。

必备插件

Auto Close Tag - 自动闭合 HTML 标签
Auto Import - 自动 import 插件
Auto Rename Tag - 修改 HTML 标签时，自动修改匹配的标签
Bracket Pair Colorizer - 给括号前后进行着色
Can I Use - HTML5、CSS3、SVG 的浏览器兼容性检查
Code Spell Checker - 检查代码中的拼写错误
Code Runner - 运行选中代码段（支持大量语言，包括 Node）
Git Blame - 在状态栏显示当前行的 Git 信息
Git History - 查看 git log
GitLens - 显示文件最近的 commit 和作者，显示当前行 commit 信息
ESLint - ESLint 插件
Debugger for Chrome - 配合 chrome 进行 debug
HTML CSS Support - html，css 提示
HTMLHint - HTML 格式提示
JavaScript (ES6) code snippets - 支持 ES6 语法代码段
JavaScript Snippet Pack - 使用简单的两个字母就可以生成 JS 语句，需要记忆
jQuery Code Snippets - jquery 快捷提示，安装了之后输入 jq 就会看到很多提醒
language-stylus - 支持 stylus
Material Icon Theme - icon 样式，很好看
npm - 运行 npm 命令
npm Intellisense - 导入模块时，提示已安装模块名称
open in browser - 在浏览器运行当前页面，快捷键（option+B）
Output Colorizer - 控制台输出着色
Panda Theme - 一个主题
Path Intellisense - 路径自动补充
Prettier - 代码美化，快捷键（shift+option+F）
Vetur - 目前比较好的 Vue 语法高亮

用户自定义设置

使用 cmd+shift+P所有所有打开用户设置，在设置的 json 中修改编辑器内置的格式，以下是个人的一些修改，其中包括一些 eslint、prettier、vetur 和编辑器的设置，不喜欢的可以自行 google 或者百度。

{	
  // 缩进2个空格	
  "editor.tabSize": 2,	
  // - 不应该作为单词的分隔符	
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",	
  // 控制是否在键入时自动显示建议	
  "editor.quickSuggestions": {	
    "strings": true	
  },	
  // 每次保存的时候将代码按 eslint 格式进行修复，前提是项目下有 ESlint	
  "eslint.autoFixOnSave": true,	
  "eslint.validate": [	
    "javascript",	
    "javascriptreact",	
    {	
      "language": "html",	
      "autoFix": true	
    },	
    {	
      "language": "vue",	
      "autoFix": true	
    }	
  ],	
  "eslint.options": {	
    "plugins": ["html"]	
  },	
  //  让 prettier 使用 eslint 的代码格式进行校验	
  "prettier.eslintIntegration": false,	
  // 结尾必须添加分号	
  "prettier.semi": true,	
  // 使用单引号	
  "prettier.singleQuote": true,	
  //   使用tab自动变为2个空格	
  "prettier.tabWidth": 2,	
  "[html]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[javascript]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[jsonc]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[json]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[javascriptreact]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[typescript]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "[typescriptreact]": {	
    "editor.defaultFormatter": "esbenp.prettier-vscode"	
  },	
  "vetur.format.defaultFormatter.html": "js-beautify-html",	
  "vetur.format.defaultFormatterOptions": {	
    "js-beautify-html": {	
      // vue组件中html代码格式化样式 force-aligned	
      "wrap_attributes": "auto"	
    },	
    "prettyhtml": {	
      "printWidth": 130,	
      "singleQuote": true	
    }	
  }	
}