ES6规范 ESLint
在團隊的項目開發過程中，代碼維護所占的時間比重往往大于新功能的開發。因此編寫符合團隊編碼規范的代碼是至關重要的，這樣做不僅可以很大程度地避免基本語法錯誤，也保證了代碼的可讀性，畢竟：
程序是寫給人讀的，只是偶爾讓計算機執行一下。—— Donald Knuth
本文將講解如何在 VSCode 中配合 ESLint 擴展來實踐團隊內部的前端編碼規范。
前端編碼規范
ESLint 完整配置文件
什么是 ESLint
ESLint（中文站點）是一個開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 于 2013 年 6 月創建。ESLint 的初衷是為了讓程序員可以創建自己的檢測規則，使其可以在編碼的過程中發現問題而不是在執行的過程中。ESLint 的所有規則都被設計成可插入的，為了方便使用，ESLint 內置了一些規則，在這基礎上也可以增加自定義規則。
安裝 ESLint 擴展
安裝環境
VSCode V1.11.1
Windows 10
安裝 ESLint 擴展
首先，打開 VSCode 擴展面板并搜索 ESLint 擴展，然后點擊安裝
安裝完畢之后點擊?重新加載?以激活擴展，但想要讓擴展進行工作，我們還需要先進行 ESLint 的安裝配置。
安裝 ESLint
如果你僅僅想讓 ESLint 成為你項目構建系統的一部分，我們可以在項目根目錄進行本地安裝：
$ npm install eslint --save-dev如果想使 ESLint 適用于你所有的項目，我們建議使用全局安裝，使用全局安裝 ESLint 后，你使用的任何 ESLint 插件或可分享的配置也都必須在全局安裝。
這里我們使用全局安裝：
$ npm?install?-g eslint安裝完畢后，我們使用?eslint --init?命令在用戶目錄中生成一個配置文件（也可以在任何你喜歡的位置進行生成）
我們在第一個選項中選擇自定義代碼風格，之后根據需要自行選擇。
設置完成后我們會得到一份文件名為?.eslintrc.js?的配置文件：
module.exports = {"env": {"browser": true,"commonjs": true,"es6": true},"extends": "eslint:recommended","parserOptions": {"sourceType": "module"},"rules": {"indent": ["error",4],"linebreak-style": ["error","windows"],"quotes": ["error","single"],"semi": ["error","never"]} };配置 ESLint
配置文件生成之后，我們接著可以進行自定義修改，這里我們只粗略講解常用的配置項，完整的可配置項可訪問官方文檔
配置環境
在上文生成的配置文件中可以使用?env?屬性來指定要啟用的環境，將其設置為?true，以保證在進行代碼檢測時不會把這些環境預定義的全局變量識別成未定義的變量而報錯：
"env": {"browser": true,"commonjs": true,"es6": true,"jquery": true }設置語言選項
默認情況下，ESLint 支持 ECMAScript 5 語法，如果你想啟用對 ECMAScript 其它版本和 JSX 等的支持，ESLint 允許你使用?parserOptions?屬性進行指定想要支持的 JavaScript?語言選項，不過你可能需要自行安裝?eslint-plugin-react?等插件。
"parserOptions": {"ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {"jsx": true} }配置規則
在上文的配置文件中，?"extends": "eslint:recommended"?選項表示啟用推薦規則，在推薦規則的基礎上我們還可以根據需要使用?rules?新增自定義規則，每個規則的第一個值都是代表該規則檢測后顯示的錯誤級別：
"off"?或?0?- 關閉規則
"warn"?或?1?- 將規則視為一個警告
"error"?或?2?- 將規則視為一個錯誤
完整的可配置規則列表可訪問：http://eslint.cn/docs/rules/
其中帶?√?標記的表示該規則為推薦規則。
設置 ESLint 擴展
安裝并配置完成 ESLint 后，我們繼續回到 VSCode 進行擴展設置，依次點擊?文件 > 首選項 > 設置?打開 VSCode 配置文件
從左側系統設置中可以看到，ESLint 擴展默認已經啟用，我們現在只需在右側用戶設置中添加配置來指定我們創建的?.eslintrc.js配置文件路徑即可啟用自定義規則檢測，ESLint 會查找并自動讀取它們：
"eslint.options": {"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js" },至此，我們已經可以使用 ESLint 擴展來檢測我們的 js 文件了。
讓 ESLint 支持 Vue 單文件組件
由于 ESLint 默認只支持 js 文件的腳本檢測，如果我們需要支持類?html?文件（如?vue）的內聯腳本檢測，還需要安裝?eslint-plugin-html?插件。
因為我們使用全局安裝了 ESLint，所以?eslint-plugin-html?插件也必須進行全局安裝：
$ npm?install?-g eslint-plugin-html安裝完成后，我們再次打開?文件 > 首選項 > 設置，在右側用戶設置中修改 ESLint 的相關配置并保存：
"eslint.options": {"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js","plugins": ["html"] }, "eslint.validate": ["javascript","javascriptreact","html","vue" ]
最后，我們打開一個?vue?文件，可以發現 ESLint 擴展已經正常工作了，嗯，enjoy yourself (●ˇ?ˇ●)
還有比較懶的方式，也是在首選項設置里，保存就存格式
"eslint.autoFixOnSave": true,
? ? "eslint.validate": [
? ? ? ? "javascript",{
? ? ? ? ? ? "language": "vue",
? ? ? ? ? ? "autoFix": true
? ? ? ? },"html",
? ? ? ? "vue"
? ? ],
? ? "vetur.format.defaultFormatter.html": "js-beautify-html"
或
{"eslint.options": { "configFile": "D:/CompanyFiles/GoldWind/doc/goldwind/vue/.eslintrc.js", "plugins": ["html"]},"eslint.validate": [ "javascript", "javascriptreact", "html", "vue"],"eslint.autoFixOnSave": true, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true},"html", "vue"],"vetur.format.defaultFormatter.html": "js-beautify-html"}eslintrc.js的內容
module.exports = {
? root: true,
? parser: 'babel-eslint',
? parserOptions: {
? ? sourceType: 'module'
? },
? // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
? extends: 'standard',
? // required to lint *.vue files
? plugins: [
? ? 'html'
? ],
? // add your custom rules here
? 'rules': {
? ? // allow paren-less arrow functions
? ? 'arrow-parens': 0,
? ? // allow async-await
? ? 'generator-star-spacing': 0,
? ? // allow debugger during development
? ? 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
? ? // allow undefined variable
? ? 'no-undef' :0
? }
}
總結
以上是生活随笔為你收集整理的ES6规范 ESLint的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： platform(win32) 错误
- 下一篇： iview日期控件，双向绑定日期格式