vscode 默認(rèn)配置對(duì)于 react 的 JSX 語(yǔ)法不友好，體現(xiàn)在使用自動(dòng)格式化或者粘貼后默認(rèn)縮進(jìn)錯(cuò)誤，盡管可以通過(guò)改變 language mode 緩解錯(cuò)誤，但更改 language mode 后的格式化依然不夠理想。
通過(guò)搭配使用 ESLint 和 Prettier 插件可以實(shí)現(xiàn)在 vscode 中完美支持 JSX 語(yǔ)法。
編輯器安裝插件
在 vscode 中需要安裝下面插件：
項(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)：
可能遇到的問(wèn)題
如果在項(xiàng)目中文件名后綴是 .js 而不是 .jsx ，可能會(huì)遇到下面的錯(cuò)誤：
在 .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)
檢測(cè) props 的類(lèi)型有助于寫(xiě)出復(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,
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
