vs code 开发react用啥插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vs code 开发react用啥插件相关的知识，希望对你有一定的参考价值。
使用VSCode开发React-Native是个不错的选择，因为这个编辑器十分简洁、流畅，并且微软官方提供了React Native Tools插件，支持代码高亮、debug以及代码提示等十分强大的功能，并且VSCode本身的代码跳转十分优秀。但是我下载了此插件，发现其他功能正常，唯独代码没法正确提示，右下角也没有显示salsa。经过我的不懈Google以及查看官方文档：javascript in VS Code，最终找到了替代解决方案。
名称 简述
Auto Close Tag 自动闭合html标签
Auto Import Typescript自动import提示
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Beautify css/sass/scss/less css/sass/less格式化
Better Comments 编写更加人性化的注释
Bookmarks 添加行书签
Can I Use HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner 运行选中代码段（支持大量语言，包括Node）
Code Spellchecker 单词拼写检查
CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎
Color Highlight 颜色值在代码中高亮显示
Color Info 小窗口显示颜色值，rgb,hsl,cmyk,hex等等
Color Picker 拾色器
Document This 注释文档生成
ESLint ESLint插件，高亮提示
EditorConfig for VS Code EditorConfig插件
Emoji 在代码中输入emoji
File Peek 根据路径字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代码段
Git Blame 在状态栏显示当前行的Git信息
Git History(git log) 查看git log
GitLens 显示文件最近的commit和作者，显示当前行commit信息
Guides 高亮缩进基准线
Gulp Snippets Gulp代码段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
htmltagwrap 包裹HTML
Import Cost 行内显示导入（import/require）的包的大小
Indenticator 缩进高亮
IntelliSense for css class names css class输入提示
JavaScript (ES6) code snippets ES6语法代码段
JavaScript Standard Style Standard风格
JSON to TS JSON结构转化为typescript的interface
JSON Tools 格式化和压缩JSON
Less IntelliSense less变量与混合提示
Lodash Lodash代码段
Log Wrapper 生产打印选中变量的代码
MochaSnippets Mocha代码段
Node modules resolve 快速导航到Node模块
Code Outline 展示代码结构树
Output Colorizer 彩色输出信息
Partial Diff 对比两段代码或文件
Path Autocomplete 路径完成提示
Path Intellisense 另一个路径完成提示
PostCss Sorting css排序
Prettify JSON 格式化JSON
Project Manager 快速切换项目
Quokka.js 不需要手动运行，行内显示变量结果
REST Client 发送REST风格的HTTP请求
React Native Storybooks storybook预览插件，支持react
React Playground 为编辑器提供一个react组件运行环境，方便调试
React Standard Style code snippets react standar风格代码块
Sass sass插件
Settings Sync VSCode设置同步到Gist
Sort Typescript Imports typescript的import排序
Sort lines 排序选中行
String Manipulation 字符串转换处理（驼峰、大写开头、下划线等等）
Syncing vscode设置同步到gist
TODO Parser Todo管理
TS/JS postfix completion ts/js前缀提示
TSLint TypeScript语法检查
Test Spec Generator 测试用例生成（支持chai、should、jasmine）
TypeScript Import TS自动import
TypeSearch TS声明文件搜索
Types auto installer 自动安装@types声明依赖
VSCode Great Icons 文件图标拓展
Version Lens package.json文件显示模块当前版本和最新版本
View Node Package 快速打开选中模块的主页和代码仓库
VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）
filesize 状态栏显示当前文件大小
ftp-sync 同步文件到ftp
gitignore .gitignore文件语法
htmltagwrap 快捷包裹html标签
language-stylus Stylus语法高亮和提示
markdownlint Markdown格式提示
npm Intellisense 导入模块时，提示已安装模块名称
npm 运行npm命令
stylelint css/sass/less代码风格
vetur 目前比较好的Vue语法高亮
vscode-database 操作数据库，支持mysql和postgres
vscode-icons 文件图标，方便定位文件
vscode-random 随机字符串生成器
vscode-styled-components styled-components高亮支持
vscode-styled-jsx styled-jsx高亮支持。
第2006期开发 React 和 Rax 样式用这款 VS Code 插件就够了
前言
工欲善其事必先利其器。本来想看看vscode插件的，没看到合适的。今日早读文章由阿里@洋风,@果大授权分享。
@洋风，阿里巴巴淘系技术高级前端工程师，主要负责多端研发套件 Iceworks，对于编写 VS Code 插件有非常丰富的经验。Iceworks 致力于通过可视化、搭建、智能化等手段降低前端研发门槛，提高研发效率。
正文从这开始~~
我们通过 React 和 Rax：https://rax.js.org/开发了大量的前端应用。在开发 JSX 文件时，基于代码提示和补全，代码片段，TypeScript 等方式很好的提升了页面逻辑的开发效率。而我们却经常忽略了样式的开发效率，相信你在开发样式文件的过程中，一定遇到了很多不方便的地方。
全新的 CSS Class 开发体验
Iceworks Style Helper 打通了 JSX 和 CSS 的文件之间的联系，可更高效的预览，定位和使用样式属性。
预览和定位样式
只要将鼠标悬停至想要查看的样式上，便可预览已有的样式内容详情。再通过 Cmd (Windows Control) + 鼠标点击 ，快速定位到样式实现位置，方便我们快速对属性进行修改。
使用样式
当我们需要使用已有样式时，出现的自动联想补全，方便我们快速选取需要使用的样式。
改善 className 开发体验
编辑组件的 className 属性时，同样会有样式的预览，定位以及快速补全。
当我们先写好 JSX 组件的结构，再开发样式文件时，提示出 JSX 文件中已申明的样式 className ，可快速生成需要修改的样式结构。
全新的行内样式开发体验
在 JSX 文件中开发内联样式时会出现样式属性的提示和补全，不但可预览并查看 CSS 相关文档，还可以快速选择推荐候选值。使 JSX 文件也具备了样式代码提示推荐的能力。
全新的 SASS 开发体验
变量的使用一直困扰着众多 SASS 开发者。Iceworks Style Helper 通过深层的 SASS 文件分析，彻底改善变量使用体验。
SASS 变量预览及定位
在 SASS 文件中鼠标悬停至想要查看的变量上时，便可预览变量值和实际颜色，同时通过 Cmd (Windows Control) + 鼠标点击可快速跳转至变量定义的位置，对变量进行修改。彻底改善 SASS 变量的使用和开发体验。
SASS 变量使用
当我们需要使用一个变量时，出现联想的变量值同时可预览对应的变量值，保障变量使用的正确性。同时当我们使用的值和已有变量的值相同时，也会出现对应变量的替换，更快速的使用 SASS 变量。充分使用定义 SASS 变量的同时，也大大降低了变量使用出错的概率。
What's Next
我们计划将支持更多的样式开发场景，比如 Less，CSS Modules 等，同时提供更智能的推荐和代码生成。我们也会提供常用样式方案封装，比如一键水平垂直居中等，以及可视化编辑样式方案，请大家尽情期待。
是时候升级和改善我们的样式开发体验了，快来下载体验:https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks吧~
为你推荐
欢迎自荐投稿，前端早读课等你来
以上是关于vs code 开发react用啥插件的主要内容，如果未能解决你的问题，请参考以下文章