vscode react插件

基于visual studio code + react 开发环境搭建过程

开发环境 windows

开发工具 visual studio code

node 安装和 npm

windows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。
安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装。
目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具)。这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v 检查是不是安装成功。同样成功会输出版本号。

安装 visual studio code

vs code 正常软件安装 没有需要注意的,直接下载安装

安装React

参照文档React JavaScript Tutorial in VS Code 文档已经很详细 按照文档来一遍就基本上没问题。

vscode react插件(基于visual studio code + react 开发环境搭建过程)

vscode react插件(基于visual studio code + react 开发环境搭建过程)

至此新建的React项目已经可以正常运行了
5.用VS Code 打开项目文件夹,这里可以看到整个文件结构

vscode react插件(基于visual studio code + react 开发环境搭建过程)

所有文件都可以直接使用VS Code直接修改。

安装 Debugger for Chrome

1.VS Code 提供 Debugger for Chrome 插件 可以支持使用chrome内核debug。

vscode react插件(基于visual studio code + react 开发环境搭建过程)

直接搜索 安装 之后重新加载一次VS Code
2.使用Debugger for Chrome 进行debug 需要对项目进行额外的配置

vscode react插件(基于visual studio code + react 开发环境搭建过程)

在此处设置启动配置,文档原文中所说的会创建一个新的launch.json,我这里已经存在一个launch.json文件则直接在里面添加配置即可,这里有一个添加配置的按钮可以直接添加配置节点 ,注意这里有两个chrome相关节点一个Launch 一个 Attach

vscode react插件(基于visual studio code + react 开发环境搭建过程)

创建完两个节点 之后 找到 "request": "launch" 的一个节点里面有一个url将这个url设置为之前 React 项目启动的url,即 http://localhost:3000/ 另一个配置节点默认即可如有问题再做修改,修改后的全部配置如下:

  • {
        // 使用 IntelliSense 了解相关属性。 
        // 悬停以查看现有属性的描述。
        // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "attach",
                "name": "Attach to Chrome",
                "port": 9222,
                "webRoot": "${workspaceFolder}"
            },
            {
                "type": "chrome",
                "request": "launch",
                "name": "chrome",
                "url": "http://localhost:3000",
                "webRoot": "${workspaceFolder}"
            },
            {
                "type": "node",
                "request": "launch",
                "name": "node",
                "program": "${workspaceFolder}\\start"
            }
        ]
    }
    
  • 启动项目npm start 然后打开debug工具栏

    vscode react插件(基于visual studio code + react 开发环境搭建过程)

    选择之前添加的 chrome 节点启动 ,此时会打开一个新的chrome页面

    在项目源代码种找到index.js文件打上断点在行号前面点左键即可 之后刷新页面,则可进入端点

    vscode react插件(基于visual studio code + react 开发环境搭建过程)

    至此已经可以简单进行调试了。

    安装 eslint

    eslint 是一个可组装的JavaScript和JSX检查工具。可用于检查语法错误规范代码。

    vscode react插件(基于visual studio code + react 开发环境搭建过程)

    3.打开VS Code 的 命令面板 直接在查看种找到或者 Ctrl+Shift+P 输入ESLint 找到创建.eslintrc.json文件的选项 此时项目根目录下会创建一个配置文件 此时你在项目中的一些语法错误会被自动检测出来

    vscode react插件(基于visual studio code + react 开发环境搭建过程)

    参考文档中还有配置分号的规则,需要的可以添加。

    到此这篇关于visual studio code + react 开发环境搭建的文章就介绍到这了,更多相关vscode react环境搭建内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    标签: