VSCode配置react开发环境的步骤


Posted in Javascript onDecember 27, 2017

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,

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
javascript cookie的简单应用
Feb 24 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 #Javascript
AngularJS集合数据遍历显示的实例
Dec 27 #Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 #Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 #Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
You might like
PHP的Yii框架的基本使用示例
2015/08/21 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
js module大战
2019/04/19 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python的面向对象思想分析
2015/01/14 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Django中Model的使用方法教程
2018/03/07 Python
python 读入多行数据的实例
2018/04/19 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
Shell编程面试题
2012/05/30 面试题
医药销售求职信范文
2014/02/01 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
城南旧事电影观后感
2015/06/16 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers