内容简介:最近使用VS Code来开发React,本文记录一些使用的VS Code插件以及离线安装插件的方法。内网环境的开发需要考虑插件的离线开发,参考了感觉自带的代码格式化功能基本够用了,就没安装 Prettier 和 Beautify,Beautify反而还会把react里面的jsx格式化弄乱。
最近使用VS Code来开发React,本文记录一些使用的VS Code插件以及离线安装插件的方法。
VS Code 插件的离线安装
内网环境的开发需要考虑插件的离线开发,参考了 简单的 VSCode 插件离线安装方法 ,发现官方以及很贴心的提供了下载插件的方式,总结下来一共3步:
- 进入VS Code Market,搜索需要的插件
-
点击Download Extension,下载下来的是
.vsix
格式文件 -
安装VS Code时配置好了环境变量,在控制台执行
code --install-extension your-extension-name.vsix
即可安装
一些实用的插件
-
适用于 VS Code 的中文(简体)语言包 :
- 地址: Chinese (Simplified) Language Pack for Visual Studio Code
- 英文好的同学可以不必安装本插件
-
一个下载量最多的VS Code 主题插件: One Dark Pro
- 地址:One Dark Pro
-
ESLint:
- 地址:ESLint
-
Debugger for Chrome:
- 地址:Debugger for Chrome
- 可以和WebStorm一样打断点了
-
路径自动补全插件: Path Intellisense
- 地址:Path Intellisense
- 虽然VS Code自带了自动补全路径功能,html文件没有问题,但是在jsx里有些文件无法智能提示(比如jsx里面的img的src),本插件很好用,相对路径绝对路径都没有问题
-
JSON工具: JSON Tools
- 地址:JSON Tools
-
格式化JSON很方便,只需两个快捷键: 格式化JSON
Ctrl(Cmd)+Alt+M
, 压缩JSONAlt+M
-
CSS 智能提示插件: IntelliSense for CSS class names in HTML
- 地址: IntelliSense for CSS class names in HTML
-
本插件已经支持
className
和class
(TypeScript React, JavaScript and JavaScript React language modes) - 暂不支持css module智能提示
-
CSS Module 智能提示
- 地址:CSS Modules
- 本插件可以解决IntelliSense for CSS class names in HTML不支持css module智能提示的功能
- 可以实现css自动补全、转到定义位置
-
括号颜色匹配: Bracket Pair Colorizer
- 地址: Bracket Pair Colorizer
- 使用颜色来配对括号
-
Bookmarks
- 地址:Bookmarks
- 将常用的位置添加到书签,可以极大提高效率
-
React/Redux/react-router Snippets
- 地址: React/Redux/react-router Snippets
- React 的代码段,熟悉了之后很方便
JSX 中使用 Emmet 快速补全标签
react
{ ... // 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射。 // 示例: {"vue-html": "html", "javascript": "javascriptreact"} "emmet.includeLanguages": {"javascript": "javascriptreact"}, // 启用后,按下 TAB 键,将展开 Emmet 缩写。 "emmet.triggerExpansionOnTab": true ... } 复制代码
-
其中
emmet.triggerExpansionOnTab
配置为true
可以使用 TAB 键自动补全组件标签了 -
可以自动将
class
转为className
,很方便
关于格式化插件
感觉自带的代码格式化功能基本够用了,就没安装 Prettier 和 Beautify,Beautify反而还会把react里面的jsx格式化弄乱。
参考资料
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- webpack简介与常用配置之插件
- 一个灵活的,可配置的波浪动画插件
- 深入探索 Android Gradle 插件的缓存配置
- vscode Golang 开发环境配置(含插件编译)
- 一款检查Gradle依赖配置是否冲突的插件
- webpack4配置详解之常用插件分享 原 荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大连接
[美] 尼古拉斯•克里斯塔基斯(Nicholas A. Christakis)、[美] 詹姆斯•富勒(James H. Fowler) / 简学 / 中国人民大学出版社 / 2013-1 / 59.90元
[内容简介] 1. 本书是继《六度分隔》之后,社会科学领域最重要的作品。作者发现:相距三度之内是强连接,强连接可以引发行为;相聚超过三度是弱连接,弱连接只能传递信息。 2. 本书讲述了社会网络是如何形成的以及对人类现实行为的影响,如对人类的情绪、亲密关系、健康、经济的运行和政治的影响等,并特别指出,三度影响力(即朋友的朋友的朋友也能影响到你)是社会化网络的强连接原则,决定着社会化网络的......一起来看看 《大连接》 这本书的介绍吧!