收集一下code插件,了胜于无!!!

667 阅读3分钟

先搞一个这个叭~~~

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

中文!中文!中文!中文!中文!

默默付出式插件

Image preview

当鼠标悬浮在图片的链接上时,可以实时预览该图片,除此之外,还可以看到图片的大小和分辨率。

Auto Rename Tag

在重命名一个 HTML 标签时,自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签,而忘记修改结束标签。

Bracket Pair Colorizer

用不同颜色区分出代码中的括号,对于括号很多的代码非常实用。该插件还支持自定义括号颜色。

VSCode-Icons 或者 Material Icon Theme

漂亮的文件图标。

Auto Close Tag

自动补全HTML结束标签。

Path Autocomplete 和 Path Intellisense

路径补齐

Import Cast

该插件用于在编辑器中内联显示导入包的大小。该扩展使用 webpack 来检测导入包的大小。

Error Lens

把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出,增强了语言的诊断功能,突出显示了由该语言生成的诊断所在的整行,并在代码行的位置以行方式在线打印了诊断消息。

npm Intellisense

npm 安装包之后,在 require 时提供该插件可以获得智能提示,import 语句中自动填充 npm 模块。

JavaScript (ES6) code snippets

ES6代码智能提示

Vue 3 Snippets

Vue3代码智能提示

需要了解其使用方法的插件

GitLens

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。

CSS Peek

CSS Peek 插件允许我们在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。

Vetur

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

Beautify

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

在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化。

ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示,React 开发者必备。借助此代码段,可以轻松创建基于类的组件、function组件。

Live Server

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

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

漂亮的主题

万物不及默认黑

  • One Dark Pro
  • Dracula Official

其他类插件

Settings Sync

用于将 Visual Studio Code 的设置保存在 GitHub 上,并轻松地将其用于其他计算机,例如有关扩展的信息或系统设置。使用该插件就可以轻松地为许多不同的机器进行设置,而无需打开之前安装的扩展和相关设置。

另附code中的常用快捷键

  • 同时多位置输入:Alt+光标选择多处

  • 单行注释或取消: ctrl+/

  • 多行注释:alt+shift+A

  • 自动优化格式:选中代码块,alt+shift+F

  • 删除当前行:shift + ctrl + k

  • 行增加或者减少缩进: ctrl + [ 或者ctrl + ]

  • 选取竖块 alt+shift+鼠标左击按住选取

  • 从一行代码的中间直接换到第二行: Ctrl+Enter

  • 查找文件 :ctrl + p

  • 显示/隐藏左侧目录栏: ctrl + b