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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
在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扩展开发经验分享
2012/09/06 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
php实现简易计算器
2020/08/28 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python装饰器decorator用法实例
2014/11/10 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
求职信标题怎么写
2014/05/26 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
解决Oracle数据库用户密码过期
2022/05/11 Oracle
Python Flask实现进度条
2022/05/11 Python