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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python实现猜单词小游戏
2020/05/22 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python实现多属性排序的方法
2018/12/05 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
2014年教师个人工作总结
2014/11/10 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年度工作总结报告
2014/12/15 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Python内置数据类型中的集合详解
2022/03/18 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
青岛市的收音机研制与生产
2022/04/07 无线电
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers