VSCode配置react开发环境的步骤

vscode 默认配置对于 react 的 JSX 语法不友好，体现在使用自动格式化或者粘贴后默认缩进错误，尽管可以通过改变 language mode 缓解错误，但更改 language mode 后的格式化依然不够理想。

通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法。

编辑器安装插件

在 vscode 中需要安装下面插件：

  1. ESLint
  2. Prettier

项目中的配置

配置ESLint

基础配置

项目中安装 babel-eslint , eslint-plugin-jsx-a11y , eslint-plugin-react 依赖：

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

推荐的 ESLint 配置如下（修改 .eslintrc ）

{
 // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
 "extends": "airbnb",

 // We use 'babel-eslint' mainly for React Native Classes
 "parser": "babel-eslint",
 "ecmaFeatures": {
  "classes": true,
 },

 // jsx相关插件
 "plugins": ["react", "jsx-a11y", "import"]

 // We can add/overwrite custom rules here
 "rules": {
  // React Native has JSX in JS files
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  // React Native includes images via require("../images/example.png")
  "global-require": 0
 }
}

需要注意几点：

  1. 如果使用 yarn 安装，需要手动创建 .eslintrc 文件
  2. 如果在使用过程中 eslint 报错，提示缺少依赖，安装相关依赖就好

可能遇到的问题

如果在项目中文件名后缀是 .js 而不是 .jsx ，可能会遇到下面的错误：

代码如下:

[eslint] JSX not allowed in files with extension '.js' (react/jsx-filename-extension)

在 .eslintrc 中添加新的 rules 允许 .js 和 .jsx 后缀就好：

"rules": {
 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

react-native 0.49 及以后版本已经不建议使用 .jsx 为后缀了，参考这个讨论 No .jsx extension?

props validation 错误

[eslint] 'navigation' is missing in props validation (react/prop-types)

检测 props 的类型有助于写出复用组件，最好不要把这个提醒关掉，如果一定要关，添加下面规则：

"rules": {
 "react/prop-types": 0
}

配置Prettier

我们想要的效果是： 配置 Prettier 按照 ESLint 的规则保存文件时自动格式化 JSX 代码 ，步骤如下：

项目中安装 prettier-eslint

npm install prettier-eslint --save-dev

配置 vscode workspace

在 vscode workspace 用户自定义部分添加如下代码：

// Format a file on save.
// A formatter must be available,
// the file must not be auto-saved,
// and editor must not be shutting down.
"editor.formatOnSave": true,

// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,

// Use 'prettier-eslint' instead of 'prettier'.
// Other settings will only be fallbacks
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我

  • React Native搭建iOS开发环境

    React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • React Native 搭建开发环境的方法步骤

    React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • react.js使用webpack搭配环境的入门教程

    react.js使用webpack搭配环境的入门教程

    本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称

  • React Native 环境搭建的教程

    React Native 环境搭建的教程

    一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-

  • 快速搭建React的环境步骤详解

    快速搭建React的环境步骤详解

    前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道. 本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考. 有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么. 1.Nodejs & NPM 为什么要提nodejs呢? 与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态.nodejs平台上衍生出了强大的npm.grunt.express等,几乎重新定义了前端的工作

  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • webpack 2.x配置reactjs基本开发环境详解

    本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打

  • React + webpack 环境配置的方法步骤

    本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下: 安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式 安装Babel loader // 安装babel-core核心模块和babel-loader npm install babel-c

  • VSCode配置react开发环境的步骤

    vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件 在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置 配置ESLint 基础配置 项目中安装 babel-eslint ,

  • 手把手教你vscode配置golang开发环境的步骤

    手把手教你vscode配置golang开发环境的步骤

    1.下载安装Golang https://golang.google.cn/dl/ 一路下一步即可 2.下载安装Vscode https://visualstudio.microsoft.com/zh-hans/ 3.检查Golang是否安装成功 4.设置Golang 环境变量 go env -w GO111MODULE=on Golang1.16默认开启,1.16一下需要执行这条命令 go env -w GOPROXY=https://goproxy.cn,direct 设置七牛CDN 我的环

  • webpack手动配置React开发环境的步骤

    webpack手动配置React开发环境的步骤

    React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能... 1. 首先用npm初始化环境 mkdir react-webpack-demo cd react-webpack-demo npm init -y 安装相关软件包 npm install r

  • VSCode 配置C++开发环境的方法步骤

    第一步.安装VSCode应用程序 打开VSCode官网,下载对应安装包并默认安装(这里指明:安装路径可以修改) 第二步.安装相关插件 此时的VSCode仅仅是一个英文文本编辑器,还称不上开发工具,所以需要相关的插件支持. 需要说明的是:这里我选择我的母语作为编辑器的语言,所以会多安装一个汉化插件! 安装 汉化插件 打开VSCode,在插件搜索输入框输入"Chinese",搜索插件"Chinese (Simplified) Language Pack for Visual St

  • Anaconda+VSCode配置tensorflow开发环境的教程详解

    1. Anaconda 1.1 Anaconda简介 Anaconda是一个开源的python发行版本,是现在比较流行的python数据科学平台,可以对python的科学包做到有效管理.在配置python开发环境时,比如爬虫环境.数据分析环境.深度学习开发环境(tensorflow)等,会需要安装很多科学包.如果遇到什么包就报出"No module named"的错误,然后"pip install"未免太过麻烦.而且很多开发环境支持的python版本不同,混在一起的

  • 如何使用VSCode配置Rust开发环境(Rust新手教程)

    VSCode配置Rust开发环境 在商店中输入rls,选择rust,点击Quick start中的下载链接.这个Rust插件你也要记得下. 跳转后来到下载界面,点击下载. 运行下载好的exe文件,命令行输入1按下回车即可. 安装完毕后在命令行输入rustc --version,如果能输出版本号则表示安装成功. 选择一个文件夹来存放我们的hello world程序(好吧,简直是一句废话...) 记得把Formatter设成rust的. 在资源管理器那一栏,右键创建文件Cargo.toml.我们简单

  • Android Studio配置Kotlin开发环境详细步骤

    Android Studio配置Kotlin开发环境详细步骤

    Android Studio配置Kotlin开发环境详细步骤 第一步:安装Kotlin插件 打开Settings面板,找到Plugins选项,点击Browse repositories(浏览仓库),输入"Kotlin"查找,然后安装即可.安装完成之后需要重启Android Studio (切记!). 安装完成之后如下图所示. 插件当前的最新版本是1.1.2-release-Studio-2.3-3. 第二步:配置Kotlin开发环境 点击菜单栏的"Tools"选项,

  • vscode配置远程开发环境并远程调试运行C++代码的教程

    之前的时候我写C/C++代码喜欢在Linux下用vim(一开始甚至都没装代码补全插件),后来入了Clion的坑,感觉IDE还是太方便了,但是毕竟还是有许多场景只能在Linux下完成,于是就经常还是需要用vim.gdb这些东西,用惯了IDE之后就觉得挺麻烦的.最近尝试了一下vscode的远程开发功能,就俩字:真香,写篇文章记录一下,以防我下次配置的时候忘记了. vscode配置远程开发环境 检查服务器是否安装ssh服务 服务器使用命令netstat -tanp查看是否存在sshd 一般这一步都不会

  • 如何在VSCode配置PHP开发环境

    如何在VSCode配置PHP开发环境

    目录 一.下载XAMPP 二. 下载xdebug插件 三.下载并安装VSCode 一.下载XAMPP XAMPP是一个易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.仅仅需要下载并启动安装程序. XAMPP下载地址 官网下载:https://www.apachefriends.org/zh_cn/download.html 其他地址下载:http://xiazai.zol.com.cn/detail/38/372445.shtml 下载完后,PHP版本号是下面这个,后面需

  • vscode配置go开发环境的实战过程

    vscode配置go开发环境的实战过程

    目录 官网下载地址: 安装: 最终的安装效果: 这里简单介绍一下: 创建第一个Go程序: 安装Go的依赖包: 总结 笔者在网上找了很多关于VSCODE配置Go语言的教程,但是由于版本等种种问题,最终都已失败告终.无奈只能在官方文档上寻求帮助,现在终于可以了!!话不多说,咱们开始吧!! 下载安装包 网上有的教程采用的是数据包安装.msi,有的是采用的是解压包.这二者最终效果都是一样的,但是为了防止不必要的意外,你们还是和我保持一致吧. 官网下载地址: Downloads - The Go Prog

随机推荐