reactnative插件 html,VSCode ReactNative 常用的插件

一、常用插件

1.React Native Tools

支持CLI命令和调试信息等。

2.vscode-icons-mac  (另外一个：Material Icon Theme)

设置文件导航图标

3.ES7 React/Redux/GraphQL/React-Native snippets

用于支持ReactNative语法

4.Dracula Official

常用的主题

5.Indent-Rainbow

代码

6.Color Highlight

颜色高亮

7.Path Intellisense

在 VS Code 中支持自动补全文件路径名的插件

8.Project Manager

快速切换项目

8.1 调出命令面板，输入：>Project Manager:Edit Projects

8.2 然后可以快速找到项目

9.代码格式化

Prettier - JavaScript formatter (快捷键：Alt + Shift + F)

10.自动补全 HTML/XML 关闭标签

Auto Close Tag

提高开发效率的插件，在 VS Code 中支持自动补全 HTML/XML 关闭标签。

11.重命名 HTML/XML 对应标签

Auto Rename Tag

提高开发效率的插件，在 VS Code 中支持重命名 HTML/XML 对应标签。

12.括号上色

Rainbow Brackets

在 React Native 开发中经常会存在多种括号混合使用，为了能够更好的区分，这个插件支持不同类型的括号进行彩色着色，支持圆括号，方括号和花括号。

13.AutoFileName

自动补全文件名的插件

14.Visual Studio IntelliCode - Preview

Command + 鼠标左键进入代码内

15.Local History

查看文件历史。

16.Flow Language Support

格式化代码

17.VSCode打开多个项目窗口的方法

下载插件：Project Manager

{

"name": "mobileApp_android",

"rootPath": "/Users/luolin/Public/Project/RNProject/mobileApp_android",

"paths": [],

"group": "",

"enabled": true

},

18.VSCode 使用Eclipse 快捷键

Eclipse Keymap

19.运行JS插件

Run Code

20.补全文件路径

Path Intellisense

21.代码颜色显示

Bracket Pair Colorizer

22.颜色高亮 Color HighLight

23.快速运行HTML代码  “live server”  --> 在代码界面单击右键 --> 选择 Open with Live Server

说明：该插件是在学习Vue学习的，目前发现在VSCode 中快速运行，并且还热更新。

二、离线安装插件

1.进入插件市场

2.下载相应的插件 后缀为 .vsix。

3.将下载的vsix 文件拷贝在指定的路径，然后cd到指定的路径执行命令安装插件。

code --install-extension dracula-theme.theme-dracula-2.22.1.vsix

4.执行完第三步后会显示如下信息。

Extension ‘dracula-theme.theme-dracula-2.22.1.vsix’ was successfully installed!

三、其它

1.Vue 安装的插件：

"Vetur" --- Vue 语法使用插件

"Live Server" --- 用户快速运行vue，并且热加载

2.在setting.json中设置如下，主要用于保存代码后自动格式化，并且 html标签、style样式、css属性及值

"editor.formatOnType": true, //自动格式化

"editor.formatOnSave": true,

"editor.suggest.snippetsPreventQuickSuggestions": false,

"files.associations": {

"*.vue": "html"

}

3.使用 “ $ code . ” 打开项目

3.1 安装code：打开VSCode –> command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行。

3.2 使用：打开终端，cd到要用VSCode打开的文件夹，然后输入命令code .即可打开