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月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
30 0
|
1月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
151 0
|
1月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
1月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
3天前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
24 4
|
10天前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
1月前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
372 3
|
1月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
45 0
|
1月前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
35 0
|
1月前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
72 0