React工程的VS Code插件及配置

栏目: 服务器 · 发布时间: 6年前

内容简介:最近使用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 的中文(简体)语言包 :
  • 一个下载量最多的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 , 压缩JSON Alt+M
  • CSS 智能提示插件: IntelliSense for CSS class names in HTML
  • CSS Module 智能提示
    • 地址:CSS Modules
    • 本插件可以解决IntelliSense for CSS class names in HTML不支持css module智能提示的功能
    • 可以实现css自动补全、转到定义位置
  • 括号颜色匹配: Bracket Pair Colorizer
  • Bookmarks
    • 地址:Bookmarks
    • 将常用的位置添加到书签,可以极大提高效率
  • React/Redux/react-router Snippets

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格式化弄乱。

参考资料


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

迷茫的旅行商

迷茫的旅行商

[美] William J. Cook / 隋春宁 / 人民邮电出版社 / 2013-10-1 / 49.00

假设一名旅行商打算拜访一张城市列表中的所有城市,每座城市只去一次,最后回到出发地。要怎么走才能让路线最短呢?这就是旅行商问题,乍一听很简单,在应用数学界却是一道研究极其热烈的难题,时至今日仍无人能解。本书中,William J. Cook将带领读者踏上一场数学之旅,跟随旅行商的脚步,从19世纪初爱尔兰数学家W. R. Hamilton最初定义该问题开始,一路奔向当今最前沿、最顶尖的解题尝试。 ......一起来看看 《迷茫的旅行商》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具