公用插件
中文插件

Atom one dark theme代码主题色

Auto Close Tag标签自动闭合插件

Auto Rename Tag标签自动重命名插件

Bracket Pair Colorizer可以用不同颜色区分出代码中的括号

Image preview实时预览该图片,看到图片的大小和分辨率


CSS Peek选择某个 class Ctrl键+鼠标左键定位到CSS

CSS Navigation 点击类名、id、标签名即可跳转到具体样式

Code Spell Checker检查单词拼写
Code Spell Checker 可以帮助我们检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰命名法)
npm Intellisense npm模块导入智能提示插件

Path Autocomplete引用路径智能提示插件

prettier自动格式化代码
在打开示例代码的vscode窗口中,使用快捷键“CTRL + Shift + P”打开vscode命令框,在框中输入“format”关键字,可以看到有2个选项
1. Format Document (快捷键 Shift+Alt+F)对整个文档做格式化
2. Format Selection (快捷键Ctrl+K, Ctrl+F)对选择代码做格式化

CodeSnap代码截图插件,只需选中项目中相应的代码段,即可快速创建代码的截图

Live Server
Live Server是一个具有实时加载功能的小型服务器,可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。
它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器,在状态栏中单击即可启动或停止服务器。
Import Cost内联显示导入包的大小
该扩展使用 webpack 来检测导入包的大小

Beautify
Beautify 可以帮助我们以更美观的方式格式化代码。它支持 JavaScript、JSON、CSS、Sass 和 HTML 等流行语言

Markdown All in One(书写Markdown)
可以在vscode里面快乐的书写Markdown,功能强大。丰富的快捷键,边写边看,轻松转化为html或pdf文件
vscode-drawio(画流程图)
可以在vscode里面快乐的画流程图,新建 .drawio 后缀文件并拖入vscode中
JavaScript Booster(代码改进)
会提示对应的不合理原因和改进方案
JavaScript (ES6) code snippets(智能提示与快速输入)
ES6语法智能提示,以及快速输入
ESlint(严谨的规范书写)
规范js代码书写规则,如果觉得太过严谨,可自定义规则
TSLint(书写规范)
ts的书写规范,这个插件是一个系列,同时还提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX
Live Share
Live Share 帮助团队中的开发人员实时共享程序中的代码,从而轻松编辑和调试程序,例如共享调试会话、终端实例、localhost Web 应用程序、语音通话等
ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/Reatc Native/react-router 语法智能提示,React 开发者必备。借助此代码段,可以轻松创建基于类的组件、function组件
JavaScript Booster
JavaScript Booster 通过分析代码及其上下文自动建议快速操作以重构或增强代码。它支持来自重构条件、声明、函数、TypeScript、promise、JSX 等的多种代码操作。


Vue相关插件
vue vscode snippets

Volar

Vetur(可以不装)
Vue 开发必备插件,它为 Vue.js 提供了实用的工具,例如调试、错误检查、语法高亮、片段等
git相关
查看git历史记录插件

GitLens了解更改代码行的人员、原因和时间

看每一行是谁写的,查看每个版本的区别的插件:
eamodio.girlens、donjayamanne
AI
tabnine人工智能提示插件

翻译
Comment Translate 翻译
打开设置,搜索comment


把鼠标放到注释中,会自动弹出翻译结果。翻译源会影响翻译时间。
切换翻译源,点击翻译结果里面的翻译源,选择翻译源
Ctrl+Shift+p,在弹出的搜索框中输入translate,点击“更改翻译源”。

点击图标也可以切换翻译源。点击baidu可以打开百度翻译的网页

选择“More”,并在右边弹出的窗口中下载[有道翻译]

自动跳转,选择有道翻译下周
下载后再次“更改翻译源”。如未更改成功,在设置中手动设置以下:
"commentTranslate.source": "DarkCWK.youdao-youdao",
//此处的有道要提前下载有道翻译插件,其余翻译源有问题
//当然如果你用的时候没有报错,可以直接用默认设置
"commentTranslate.targetLanguage": "zh-CN"

完成:自动翻译了
