IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> VS Code插件神器 -> 正文阅读

[JavaScript知识库]VS Code插件神器

1. Codelf

安装次数:2万+

在计算机科学中只有两件难事:缓存失效和命名。

我对这句话深有同感,当开发项目时,命名一直都是一种让我痛苦的事情。我想,应该不止我一个人有这样的感觉。

可是,命名又是开发过程中一项非常重要的事情,例如,一个好的函数命名,能够让你瞬间明白它实现的功能,这样就节省了很大一部分时间琢磨一段代码到底是什么含义。

所以,每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发,苦思冥想半天。

但是,CodeIf的出现让这个问题迎刃而解,它通过搜索GitHub, Bitbucket, GitLab来找到真实的使用变量名,为你提供一些高频使用的词汇,同时为你标明使用的语言、代码链接。

可以直接在网页上搜索要命令的词汇,当然,它不仅有网页版,也支持VS Code, Atom, Sublime, WebStorm等开发工具。

在VS Code中,Extensions->搜索“CodeIf”即可完成安装。

使用时只需要选中变量名,然后右键选择CodeIf就可以跳转到网页,显示候选命名。

2. local history

安装次数:14万+

修改代码之后想找回历史代码怎么办?

在使用Pycharm、IDEA时可以直接查看本地历史代码,然后轻松恢复之前某个版本。但是,VS Code默认是不支持local history的,所以,仅凭Ctrl+z撤销操作时不行的。何况,撤销操作是把前面步骤所有的操作都撤销了,其中有很多是我们不需要的。

但是,为VS Code配合上local history,所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样,每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。

3. Partial Diff

安装次数:19万+

文件比较是一种即常用有实用的一项功能,例如,我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等,如果用肉眼逐个词的去分辨,显然是无法承受的。

提起文件比较,我首先想到的就是Beyond Compare,这是一款好用的工具,但是,仅凭收费这一点就把很多人拒之门外了。

还好,VS Code插件库里有Partial Diff这款神奇的插件,选中一代码,右键Select Text for Compare,选中另外一部分代码,右键Compare Text with Previous Selection即可。

4. TODO Tree

安装次数:40万+

我在此前多篇文章中提到过,习惯使用TODOFIXME标签是一个非常好的习惯。

当我们发现某块代码需要修改,或者某块代码需要以后进一步完善,如果能够给它做一个标记,那么后续定位到对应位置是一件非常轻松高效的事情。

关于TODO标签,很多作者都推荐过TODO Highlight这款插件,但是,我更加推荐使用TODO Tree。

虽然很多标签工具能够实现TODO标签高亮,但问题是“我们怎么快速定位到对应的标签?”逐个的打开文件去寻找显然是很麻烦的,效率并没有得到太大的提升。

TODO Tree则不同,它不仅可以实现标签高亮,还可以在活动栏添加一个选项卡,它能够以不同视图展示我们标记的位置,单击对应标签就能够快速定位到指定位置。

5. vscode-icons

安装次数:466万+

一个好的编辑界面能够让开发过程心情舒畅,甚至可以提升开发效率。

显然,VS Code默认的图标是达不到这种程度的。

但是,配合vscode-icons这款插件就不同了,它具有以下特性,

  • 自定义图标
  • 自动检测项目
  • 自定义配置

它不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标,例如,git、Markdown、配置项、工具类等等。

6. Better Comments

安装次数:66万+

是不是觉得注释信息千篇一律?

Better Comments这款插件可以让VS Code注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外,还可以对注释掉的代码进行样式设置。

您想要的任何其他注释样式都可以在设置中指定

7. Bracket Pair Colorizer

安装次数:250万

当你看到上述示例中这样包含多层嵌套的括号时,是不是觉得很凌乱?至少,我是这样的,每当看到这样复杂嵌套括号时,尤其代码行数多起来以后,就很难确定哪些是处于同一层次的。不弄明白层次结构,当然阅读代码也会麻烦很多。

Bracket Pair Colorizer这款插件可以给()[]{}这些常用括号显示不同颜色,当点击对应括号时能够用线段直接链接到一起,让层次结构一目了然。除此之外,它还支持用户自定义符号。

这款神器的确解决了我的痛点。

8. Better Align

安装次数:10万+

整洁的代码,是一个优秀程序员必须要做到的。当我们阅读那些大型公司开源的代码时,会发现,它的设计模式、它的编程规范都让人赞叹不已。

Better Align就是这样一款能够实现代码规范的工具,它主要用于代码的上下对齐。

它能够用冒号(:)、赋值(=,+=,-=,*=,/=)和箭头(=>)对齐代码。

使用方法:Ctrl+Shift+p输入“Align”确认即可。

9. change-case

安装次数:24万+

标识符和命名规则是学习一门语言最基本,也是必须要了解的一项。

不同语言对变量名、函数名、类名的命名要求不同,有的是驼峰、有的是下划线...但是,不管是什么要求,都有一个共性--命名很重要。

有些编程语言甚至对命名严格到如果不按规范要求,执行时会直接报错。

而change-case就是一款快速修改当前选定内容或当前单词的命名的插件。

使用方法:Ctrl+Shift+p输入“change”然后选择要修改的格式即可。

10. Markdown All in One

安装次数:119万+

Markdown对于开发者而言,应该是一种常用的文档书写方式,虽然我在独立Markdown文档书写时习惯于使用Typora,但是对于开发过程中涉及到的API接口文档、README,我还是习惯于使用VS Code。

Markdown All in One这款插件可以实现媲美Typora的Markdown编辑体验,它具备如下特性,

  • 丰富的快捷键
  • TOC标签
  • 数学公式
  • 自动完成
  • 列表编辑
  • 输出HTML同时转PDF
  • Github风格文档
  • ......

这款插件真正做到了All in One。

干货

最近,为了方便大家,我花费了半个月的时间把这几年来收集的各种技术干货整理到一起,其中内容包括但不限于Python、机器学习、深度学习、计算机视觉、推荐系统、Linux、工程化、Java,内容多达5T+,我把各个资源下载链接整理到一个文档内,目录如下:



官网地址

VSCode插件官网地址:https://marketplace.visualstudio.com/vscode,里面有很多的插件可以使用。

基础插件

这部分插件主要是和html、css、js有关的。

html CSS Support

这个插件支持以下语言,提供基础的语法知识编写辅助。

html

laravel-blade

razor

vue

pug

jade

handlebars

php

twig

md

nunjucks

javascript

javascriptreact

HTML Snippets

这个插件主要是针对html的语法的,支持以下标签,

html5的全部标签

标签含义信息提示

一些描述性的语法

HTMLHint

这个插件提供html的编写提示,包括到属性的格式监测,语法细致监测纠正,非常好的。

stylelint

这个插件是有个css,sass,less的语法监测。
?

JavaScript (ES6) code snippets

这个插件就是js方面的内容,主要提供以下支持

JavaScript (.js)

TypeScript (.ts)

JavaScript React (.jsx)

TypeScript React (.tsx)

Html (.html)

Vue (.vue)

ESLint

这个是有关js的语法监测插件,也很棒。

Latest TypeScript and Javascript Grammar

这个插件提供最新的TypeScript和Javascript语法,可以看一下。

typescript语法支持

JavaScript语法支持

markdownlint

这个是提供markdown语法监测的插件,非常好用,帮助你养成良好的markdown编写风格。
?

框架插件

这部分插件主要是和各个框架有关的插件,比如jquery,bootstrap,vue等ui框架,html模板引擎和js框架。

EJS language support

这是一个非常好用的html模板引擎插件,提供ejs的用法。

if

for

插值

jQuery Code Snippets

虽然jQuery诞生于2006年,距今已有13年历史,但是还是有很多人在使用,所以也推荐一下。

提供以下方法:

func

jqAfter

jqAjax

jqAjaxAspNetWebService

jqAppend

jqAppendTo

jqAttrGet

jqAttrRemove

jqAttrSet

jqAttrSetFn

jqAttrSetObj

jqBefore

jqBind

jqBindWithData

jqBlur

jqChange

vetur

这个是vuejs官方团队的一名成员写的有关vuejs语法的插件,强力推荐。

Syntax-highlighting

Snippet

Emmet

Linting / Error Checking

Formatting

Auto Completion

Debugging

Vue 2 Snippets

这个也是vue的语法插件,也作为补充插件。

工具插件

这部分插件主要是日常工作过程中的一些工程化编译,构建还有辅助等工具,辅助编程。

Auto Rename Tag

这是一款有关html标签的工具,具有自动重命名标签的功能
?

Beautify

这是一款代码格式化的插件,可以对你写的代码进行格式调整,使得代码易读,规整,好看。

cssrem

这是一款有关css的px和rem转换的工具插件,方便移动端网页设计稿开发。

Document This

这是一款给js函数方法添加参数注解的插件。

filesize

这是一款计算每个文件大小的插件,方便你对你的代码量进行可视化观察,及时缩小代码量,提供代码质量。

JSON Tools

这是一款有关json数据格式化的插件,可以压缩和解压格式化json代码。

Ctrl(Cmd)+Alt+M,格式化json数据

Alt+M,压缩json数据
?

Live Server

这是一款可以提供http协议服务的插件,可以使用http进行访问本地网页,而且是实时更新内容。

Material Icon Theme

这是一款Material主题风格的图标插件,涵盖了大多数文件对应的图标,非常容易识别确认。

Minify

这是一款代码压缩插件,可以对html,css,js代码进行压缩,就像webpack打包工具那样压缩你的代码,使代码体积变小,打开速度加快。

默认是压缩以后,生成一个原来名字后加.的文件,里面是压缩后的代码,比如:example.html压缩后的名字变为example.min.html。

npm

这个插件主要是用来管理npm包的,可以在编辑器内下载,安装,查询,卸载npm包,非常方便。

open in browser

这个插件是在默认游览器打开你的网页,可以预览,但是需要手动刷新内容。

Path Intellisense

这个插件具有自动补全功能,非常方便。

Sass

这个插件是一个sass编译工具,方便书写sass代码。

Sass Lint

这个是和sass配套的一个插件,检查sass语法是否正确,
?

vscode-fileheader

这个插件可以在文档顶部插入一段说明注释,非常便于你查看当日写了哪些内容,

webpack

这个插件是一个webpack的辅助工具,可以创建webpack配置文件的,还有babel编译帮助功能,

快速注释 Document This

插件名称:Document This

优秀的代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。

Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。
?

代码拼写检查 Code Spell Checker

插件名称:Code Spell Checker

此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。

备忘插件 TODO Highlight

插件名称:TODO Highlight

在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。

better comments

通过使用警报、信息、待办事项等注释来改进代码注释!
?

万能语言运行环境 Code Runner

插件名称:Code Runner

如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。

支持的语言有:C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。


?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-06 23:59:12  更:2021-07-06 23:59:21 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 16:48:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码