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中文網其他相關文章!