溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vscode 默認配置對于 react 的 JSX 語法不友好，體現在使用自動格式化或者粘貼后默認縮進錯誤，盡管可以通過改變 language mode 緩解錯誤，但更改 language mode 后的格式化依然不夠理想。
通過搭配使用 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
推薦的 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相關插件
"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 ，可能會遇到下面的錯誤：
在 .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)
檢測 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) "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,
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
