溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

VSCode配置react開發(fā)環(huán)境的步驟

發(fā)布時(shí)間：2020-09-09 20:29:59 來源：腳本之家 閱讀：1158 作者：劉小光 欄目：web開發(fā)

vscode 默認(rèn)配置對(duì)于 react 的 JSX 語法不友好，體現(xiàn)在使用自動(dòng)格式化或者粘貼后默認(rèn)縮進(jìn)錯(cuò)誤，盡管可以通過改變 language mode 緩解錯(cuò)誤，但更改 language mode 后的格式化依然不夠理想。

通過搭配使用 ESLint 和 Prettier 插件可以實(shí)現(xiàn)在 vscode 中完美支持 JSX 語法。

編輯器安裝插件

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

  1. ESLint
  2. Prettier

項(xiàng)目中的配置

配置ESLint

基礎(chǔ)配置

項(xiàng)目中安裝 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相關(guān)插件
 "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
 }
}

需要注意幾點(diǎn)：

  1. 如果使用 yarn 安裝，需要手動(dòng)創(chuàng)建 .eslintrc 文件
  2. 如果在使用過程中 eslint 報(bào)錯(cuò)，提示缺少依賴，安裝相關(guān)依賴就好

可能遇到的問題

如果在項(xiàng)目中文件名后綴是 .js 而不是 .jsx ，可能會(huì)遇到下面的錯(cuò)誤：

復(fù)制代碼 代碼如下:

[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 及以后版本已經(jīng)不建議使用 .jsx 為后綴了，參考這個(gè)討論 No .jsx extension?

props validation 錯(cuò)誤

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

檢測 props 的類型有助于寫出復(fù)用組件，最好不要把這個(gè)提醒關(guān)掉，如果一定要關(guān)，添加下面規(guī)則：

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

配置Prettier

我們想要的效果是： 配置 Prettier 按照 ESLint 的規(guī)則保存文件時(shí)自動(dòng)格式化 JSX 代碼 ，步驟如下：

項(xiàng)目中安裝 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,

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手