Eslint-程式碼規範請了解一下

sdafsef發表於2018-07-05
EsLint

簡介

最近換工作，到了新公司接手了一個寫的非常感人的專案，程式碼簡直一鍋粥，含淚填坑數十日，讓我瞭解了程式碼規範的重要性，下定決心好好學習編碼規範，就從Eslint開始。

ESLint

ESLint是可組裝的JavaScript和JSX檢查工具。能保證寫出語法正確、風格統一的程式碼。

安裝及使用

npm install -D eslint 安裝 eslint
npx eslint --init 設定一個配置檔案
會讓你選擇怎麼配置

? How would you like to configure ESLint? (Use arrow keys)
  Use a popular style guide
> Answer questions about your style
  Inspect your JavaScript file(s)
複製程式碼

我們選擇 Use a popular style guide 用一個流行的規則 Airbnb !

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
? The style guide "airbnb" requires eslint@^4.19.1. You are currently using eslint@5.0.0.
  Do you want to downgrade? Yes
The config that you've' selected requires the following dependencies:
eslint-config-airbnb@latest 
eslint@^4.19.1 
eslint-plugin-import@^2.12.0 
eslint-plugin-jsx-a11y@^6.0.3 
eslint-plugin-react@^7.9.1
? Would you like to install them now with npm? Yes
複製程式碼

等待下載完成,我們的專案下應該生成了一個 .eslintrc.js 的檔案
我們的 eslint 將根據這個檔案來查驗我們的程式碼 我們的檔案現在是

module.exports = {
    "extends": "airbnb"
};
複製程式碼

我們也可以給它新增自己的規則如: 

// 定義自己的規則
"rules": {
    "linebreak-style": ["off", "windows"],  //換行符設定
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗號：不允許逗號
    "indent": ["error", 4], // JavaScript程式碼強制使用一致的縮排：4格縮排
    "react/jsx-indent": ["error", 4],  //react jsx-indent 4縮排
    "react/jsx-indent-props": ["error", 4],  //react jsx-indent-props 4縮排
}  
複製程式碼

也可以根據 eslint 官網配置項 和 官網規則項 自己修改配置及規則

如何使用

我們直接在命令列工具中寫 npx eslint xx.js 就可以對單個檔案進行校驗
如果我們想校驗所有檔案 直接在 package.json -> scripts 裡配置
npx eslint src/**/*.js src/**/*.jsx 就可以讓 eslint 校驗 src 資料夾下的所有檔案
注意 其實可以在後面加上 --fix 來自動修復一些問題 但是很多規則應該自己掌握吧...
儘量寫好

在webpack中配合babel使用

如果我們要配置 webpack 和 babel 中使用,需要下載 eslint-loader
npm install -D eslint-loader
並在 webpack.config.js 的 module -> rules中修改對 js 檔案的處理新增 eslint-loader 

{
    test: /\.js|jsx$/,
    use: ['babel-loader', 'eslint-loader'],
    exclude: /node_modules/
}
複製程式碼

這樣我們在使用 webpack 打包時就會對js語法進行檢測,如果有問題會報錯
在使用babel的過程中 我們可能會用到一些還沒有完美製定的規範如 babel-preset-stage-0
在我們的js語法中有這些東西時 eslint 會報錯,解決問題的辦法時:
下載 babel-eslint 並在 .eslintrc.js 加上這一項: 

"parser": "babel-eslint",
複製程式碼

最後

我把我遇到過的部分問題記錄了一下放在 這裡 其中有幾個搜尋了很長時間,給大家參考一下

相關文章