VSCode ReactNative 常用的插件

2020-02-11  本文已影响0人  光脚丫的孩子

一、常用插件

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 .即可打开       

上一篇下一篇

猜你喜欢

热点阅读