VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好，体现在使⽤⾃动格式化或者粘贴后默认缩进错误，尽管可以通过改变language mode 缓解错误，但更改 language mode 后的格式化依然不够理想。
通过搭配使⽤和插件可以实现在 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 - github/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)react native
检测 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)
"able": 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,
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。