【自用-装机必备】前端VSCode常用插件

294 阅读4分钟

公用插件

中文插件

image.png

Atom one dark theme代码主题色

image.png

Auto Close Tag标签自动闭合插件

image.png

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

image.png

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

image.png

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

image.png

image.png

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

image.png

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

image.png

Code Spell Checker检查单词拼写

Code Spell Checker 可以帮助我们检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰命名法)

npm Intellisense  npm模块导入智能提示插件

image.png

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

image.png

prettier自动格式化代码

在打开示例代码的vscode窗口中,使用快捷键“CTRL + Shift + P”打开vscode命令框,在框中输入“format”关键字,可以看到有2个选项

1. Format Document (快捷键 Shift+Alt+F)对整个文档做格式化

2. Format Selection (快捷键Ctrl+K, Ctrl+F)对选择代码做格式化

image.png

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

image.png

Live Server

Live Server是一个具有实时加载功能的小型服务器,可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。

它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器,在状态栏中单击即可启动或停止服务器。

Import Cost内联显示导入包的大小

该扩展使用 webpack 来检测导入包的大小

image.png

Beautify

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

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 等的多种代码操作。

image.png

image.png

Vue相关插件

vue vscode snippets

image.png

Volar

image.png

Vetur(可以不装)

Vue 开发必备插件,它为 Vue.js 提供了实用的工具,例如调试、错误检查、语法高亮、片段等

git相关

查看git历史记录插件

image.png

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

image.png

看每一行是谁写的,查看每个版本的区别的插件:

eamodio.girlens、donjayamanne

AI

tabnine人工智能提示插件

image.png

翻译

Comment Translate 翻译

image.png 打开设置,搜索comment

image.png

image.png

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

image.png image.png

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

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

image.png

自动跳转,选择有道翻译下周

image.png 下载后再次“更改翻译源”。如未更改成功,在设置中手动设置以下:

"commentTranslate.source": "DarkCWK.youdao-youdao",
 //此处的有道要提前下载有道翻译插件,其余翻译源有问题
 //当然如果你用的时候没有报错,可以直接用默认设置
 "commentTranslate.targetLanguage": "zh-CN"

image.png

image.png 完成:自动翻译了 image.png

AI插件

continue

image.png

CodeGeeX

image.png