React 工程的 VS Code 插件及配置
原味地址:https://juejin.im/post/5b5fce12e51d45162679e032
最近使用 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 快速补全标签
- VS Code 自带了 Emmet,可以自动补全 HTML 文件中的标签
- 想要补全
react
文件中 JSX 里面的标签,需要在用户设置中增加 Emmet 的设置:
{
...
// 在默认不支持 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格式化弄乱。
参考资料
作者:清秋
链接:https://juejin.im/post/5b5fce12e51d45162679e032
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
React 工程的 VS Code 插件及配置的更多相关文章
- 高效开发者是如何个性化VS Code插件与配置的?
2年之前,我放弃了Sublime Text,选择了Visual Studio Code作为代码编辑器. 我每天花在VS Code上的时间长达5~6个小时,因此按照我的需求优化VS Code配置十分必要 ...
- VS Code插件配置
常用 VS Code 插件: Auto Import 有了这个插件,就不需要再手动引入文件了.如果是基于组件的项目,直接输入组件名插件会自动处理 imported. ** Add jsdoc comm ...
- 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置
安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...
- 转 : React Native 开发之 IDE 选型和配置
转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...
- 10种JavaScript开发者必备的VS Code插件
摘要: 好的代码插件可以让工作效率翻倍,心情也更加舒畅! 原文:10 Must-have VS Code Extensions for JavaScript Developers 作者:Michael ...
- 令人惊叹的Visual Studio Code插件
vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件. 代码编辑插件 vscode-color-highlight ------ ...
- Fluent Nhibernate code frist简单配置
Fluent Nhibernate code frist简单配置 前言 在以前的项目开发过程中使用nhibernate做完orm映射工具需要编写大量的xml映射文件,项目过程中往往会因为一个字段等 ...
- 某马-某淘商城的day01--->分析,工程搭建,tomcat插件启动工程,svn,反思
-1:为什么还要写某马的某淘商城呢? 答:万物更新,季节交替.新人总把旧人换.所以呢,前人写了N多遍的东西,我们依旧在学,所以下决心写某马的某淘商城.(也因为在学校还没找工作,所以找个相对长期的事情做 ...
随机推荐
- 安装VMware虚拟机和centos操作系统
1,安装包:百度网盘: 2,安装教程:https://blog.csdn.net/qq_31362105/article/details/80706096 配置好操作系统,内存,网络等: 3,Cen ...
- flutter 中 List 和 Map 的用法
list集合 在Dart中,数组是List对象,因此大多数人只是将它们称为List.以下是一个简单的Dart的List: 创建一个int类型的list List list = [10, 7, 23]; ...
- SSH交互式脚本StrictHostKeyChecking选项 benchmode=yes
SSH 公钥检查是一个重要的安全机制,可以防范中间人劫持等黑客攻击.但是在特定情况下,严格的 SSH 公钥检查会破坏一些依赖 SSH 协议的自动化任务,就需要一种手段能够绕过 SSH 的公钥检查. 什 ...
- 设置Win10默认启动的Linux子系统版本,启动指定Linux发行版
设置Win10默认启动的Linux子系统版本,启动指定Linux发行版 MS酋长一年前已经与大家分享了启用“适用于Linux的Windows子系统(WSL)”的方法,但当时所能安装的只有由Cano ...
- ColorDrawable
最简单的一种Drawable,当我们将ColorDrawable绘制到Canvas(画布)上的时候, 会使用一种固定的颜色来填充Paint,然后在画布上绘制出一片单色区域! 1).Java中定义Col ...
- kotlin之map委托
fun main(arg: Array<String>) { val map = mapOf("name" to "tom", ) val user ...
- kafka----简单的脚本命令重点
kafka命令如下: kafka-shell基本命令 在节点hadoop-2,hadoop-3,hadoop-5,启动kafka 启动命令如下 kafka-server-start.sh /usr/l ...
- koa中 log4js使用
一.新建一个log4js.js配置文件 let path = require('path'); // 日志根目录 let baseLogPath = path.resolve(__dirname, ' ...
- Python生成随机数组的方法小结
Python生成随机数组的方法小结 本文实例讲述了Python生成随机数组的方法.分享给大家供大家参考,具体如下: 研究排序问题的时候常常需要生成随机数组来验证自己排序算法的正确性和性能,今天把Pyt ...
- Mysql按照设计顺序获得某个表的字段名称,字段类型,字段描述!!!!!
编写sql语句 select column_name,data_type ,column_comment from information_schema.columns where table_nam ...