开发工具规范

编辑器

统一使用Visual Studio Code(opens new window)。

常用插件

优化外观

• Chinese

Chinese (Simplified) Language Pack for Visual Studio Code，让你的 vscode 变成中文。

• Bracket Pair Colorizer

括号颜色区分，配对的括号是相同的颜色，并且选中一个括号以后，会出现一条线帮你找到它对应的另一半括号。

• vscode-icons

更换图标主题。

• Color Highlight

给代码中的颜色进行高亮展示。

提升编码效率

• vue-scss-variable-scan

  sass/scss变量提示配置插件

  • 安装vue-scss-variable-scan插件
  • 打开首选项配置setting.json
    添加 "vue-scss-variable-scan.globalPath": "node_modules/@topnet/**/*.scss"

• Vue VSCode Snippets

vue代码生成，片段补全插件。

• Element UI Snippets

可以自动补全element-ui。

• Auto Close Tag

自动补全html标签。

• Auto Rename Tag

自动修改标签名，重命名一个开始标签时，自动重命名配对的结束标签。

• Turbo Console Log

用来生成 console.log 的插件，将想打印的变量选中，按住ctrl + option + L(windows: ctrl + alt + L)，就能在变量下方自动插入一个console.log。

• Import Cost

显示在代码编辑器中导入的程序包的大小。

• Live Server

右键运行html。

• npm Intellisense

导入 npm 包的时候，智能提示。

• 别名路径跳转

支持各种形式的路径快速跳转

• Parameter Hints

参数提示标识插件

• vue-component

自动生成 vue component 模板

代码格式化

• Vetur

vue代码高亮。

• ESLint

代码检查，不符合规范的就会报错，或者警告。

• Prettier - Code formatter

代码格式化插件，这个插件通常搭配 eslint 使用，也可以单独使用。

• stylus

格式化stylus插件。

功能扩展

• GitLens — Git supercharged

每一行代码都有上一次 git 提交的记录。

• Git History

右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录。

• local History

直接看代码的修改记录。还可以跟当前版本进行对比。安装完以后，项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面，记得添加.gitignore.

• Markdown All in One

一边书写一边预览md文件。

• git-commit-plugin

对git commit提交信息规范化，使用方式可以参考文档(opens new window)。