VS Code好用的插件

简介: 写在前面,避免踩雷:经常看到一些视频中开发的代码会一键生成等,原来都是在用这些插件。弹幕上显示个emmet,于是去搜索了一下。大部分文章都是sublime text 3,于是就按照操作下载一顿安装,最后才发现,原来sublime只是代码编辑器的其中一个软件,比如:Adobe公司的Brackets,微软的Visual Studio Code,都是可以实现的。每个编辑器的语法和插件大同小异,所以你用的是哪一个编辑器就直接搜这个编辑器对应的文章。

写在前面,避免踩雷:


经常看到一些视频中开发的代码会一键生成等,原来都是在用这些插件。弹幕上显示个emmet,于是去搜索了一下。


大部分文章都是sublime text 3,于是就按照操作下载一顿安装,最后才发现,原来sublime只是代码编辑器的其中一个软件,比如:Adobe公司的Brackets,微软的Visual Studio Code,都是可以实现的。


每个编辑器的语法和插件大同小异,所以你用的是哪一个编辑器就直接搜这个编辑器对应的文章。


VS code 自带的:



  • Emmet(原名 Zen Coding):一种快速编写html/css的方法,会自动补全代码,一键生成基础代码。(在左下角设置图标——setting——搜索框输入emmet,勾选一下即可)


  • Format Document : 文档格式化,让整个文件看起来更美观,代码更优雅。

插件推荐:


  • Guides : 在代码前面显示引导线


  • Chinese(simplified) Language 简体中文:界面显示中文,时间长了可以再切换回英文,顺便提升一下。


  • CSS Peek : 允许查看 css ID 和类字符串作为从 html 文件到相应 CSS 的定义。允许查看和转到定义。鼠标点击ID或者类名,右键——Go to definition,就直接定位到当前样式。


  • Debugger for Chrome : 在 chrome 浏览器或任何其他支持 chrome 调试器协议的目标中调试您的 javascript 代码


  • filesize : show the current file size in the status bar.


  • Element UI Snippets : element -ui 的代码片段,它是用于 web snowffer Studio 的 vue.js 2.0 ui 工具包。


  • ESLint : Integrates ESlint JavaScript into VS Code.


  • ES6 JavaScript Snippets(片段)

html:5,然后按住 Tab键,即可生成html骨架。


使用命令行启动 VS Code


(1)输入快捷键「Cmd + Shift + P 」,选择install code command:


(2)使用命令行:


code命令:启动 VS Code 软件


code pathName/fileName命令:通过 VS Code 软件打开指定目录/指定文件。


一个制表符等于的空格数,Tab


cmd+,  打开设置首选项——设置


image.png



右侧是否显示代码的缩略图


VS Code 会在代码的右侧,默认显示缩略图。Cmd + ,打开首选项,你可以在设置项里搜索 editor.minimap进行设置,配置项如下:


image.png



新建文件后的默认文件类型


当我们按下快捷键「Cmd + N」新建文件时,VS Code 默认无法识别这个文件到底是什么类型的,因此也就无法识别相应的语法高亮。


如果你想修改默认的文件类型,可以在设置项里搜索files.defaultLanguage,设置项如下:


image.png



CSS Peek


增强 HTML 和 CSS 之间的关联,快速查看该元素上的 CSS 样式。


image.png


Code Spell Checker:单词拼写错误检查


这个拼写检查程序的目标是帮助捕获常见的单词拼写错误,可以检测驼峰命名。从此告别 Chinglish.


Polacode-2020:生成代码截图 【荐】


可以把代码片段保存成美观的图片,主题不同,代码的配色方案也不同,也也可以自定义设置图片的边框颜色、大小、阴影。


尤其是在我们做 PPT 分享时需要用到代码片段时,或者需要在网络上优雅地分享代码片段时,这一招很有用。


image.png


其他同类插件:CodeSnap。我们也可以通过 carbon.now.sh这个网站生成代码图片


查找某个函数在哪些地方被调用了


比如我已经在a.js文件里调用了foo()函数。那么,如果我想知道foo()函数在其他文件中是否也被调用了,该怎么做呢?


做法如下:在 a.js 文件里,选中foo()函数(或者将光标放置在foo()函数上),然后按住快捷键「Shift + F12」,就能看到 foo()函数在哪些地方被调用了,比较实用。


重构


重构分很多种,我们来举几个例子。


命名重构:


当我们尝试去修改某个函数(或者变量名)时,我们可以把光标放在上面,然后按下「F2」键,那么,这个函数(或者变量名)出现的地方都会被修改。


方法重构:


选中某一段代码,这个时候,代码的左侧会出现一个「灯泡图标」,点击这个图标,就可以把这段代码提取为一个单独的函数。


.vscode 文件夹的作用


为了统一团队的 vscode 配置,我们可以在项目的根目录下建立.vscode目录,在里面放置一些配置内容,比如:


  • settings.json:工作空间设置、代码格式化配置、插件配置。


*sftp.json:ftp 文件传输的配置。


*.vscode目录里的配置只针对当前项目范围内生效。将.vscode提交到代码仓库,大家统一配置时,会非常方便。

live-server


安装方法 点击查看


在VS Code终端中输入live-server,保存代码,可以用IP的方式运行查看当前代码,不需要手动刷新页面,配合分屏,可以说相当完美。


清空搜索框,可以看到已安装过的插件


image.png


已安装的插件



主题设置,关键词Theme


在扩展选项卡(cmd+shift+x)上,搜索 Material Theme 并安装它。我更喜欢使用 Palenight 颜色主题,但可以随意设置您喜欢的任何主题。


image.png

image.png

相关文章
|
1月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
98 1
|
21天前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
50 5
vscode10大常用插件
|
7天前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
|
25天前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
29天前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
1月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
39 0
|
1月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
95 0
|
2月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
140 3
|
2月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
45 0
下载安装 vscode(含汉化、插件的推荐和安装)
|
3月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
77 4