vscode 預設配置對於 react 的 JSX 語法不友好，體現在使用自動格式化或貼上後預設會縮排錯誤，儘管可以透過改變 language mode 來緩解錯誤，但更改 language mode 後的格式化依然不夠理想。本文主要介紹了VSCode配置react開發環境的步驟，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
透過搭配使用 ESLint 和 Prettier 外掛程式可以實現在 vscode 中完美支援 JSX 語法。
編輯器安裝外掛程式
##在vscode 中需要安裝下方外掛程式：設定ESLint
基礎配置
專案中安裝babel-eslint , eslint-plugin-jsx-a11y , eslint-plugin-react 依賴：
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
{
// 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
}
}如果在專案中檔名後綴是.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"] }]
}[eslint] 'navigation' is missing in props validation (react/prop-types)
偵測props 的型別有助於寫出重複使用元件，最好不要把這個提醒關掉，如果一定要關，加入下面規則：
"rules": {
"react/prop-types": 0
}
設定Prettier
我們想要的效果是： 設定Prettier 依照ESLint 的規則儲存檔案時自動格式化JSX 程式碼，步驟如下：
專案中安裝prettier-eslintnpm 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,
相關推薦：
實例詳解vue-cli vscode 設定eslint
以上是實例詳解VSCode配置react開發環境的步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
