前端規範化 Lint tools 推薦
說起 Lint tools,其實不如說是 Vue 的 Lint tools 推薦,在過去我對 Vue.js 的 Lint 感受的不夠深刻,由於 Vue.js 是由.vue
的字尾名組成的 template file,那樣 Lint 其實是不好做的,但是萬萬沒想到,這年頭 Lint 工具超發達的,什麼都有——
eslint
lint 界元老,也是最基本的一個 lint 工具,即使別的你什麼都不配,相信你也至少會使用 eslint 來管理你的專案。
對於 eslint 的風格,主要派系還是分為「加分號」和「不加分號」,個人認為主要還是兩種風格:「standard」和「airbnb」,對於我而言我更喜歡不加分號的standard 。
注意:加不加分號只是一個開玩笑的說法,詳細請點選進官網對比或者使用一下看看。
eslint Vue Plugin
eslint Vue Plugin 是一個針對 Vue 的 eslint 外掛,已經放在了 Vue 官方組織維護,並且和 Vue 官方推薦的Code Style 相對應。
使用這個外掛就可以在 Vue 檔案裡進行 lint 提示了。
TypeScript eslint
對於 TypeScript 專案來說,過去我們習慣用 tslint 來處理專案的 lint,但是現在官方更推薦使用typescript-eslint 這個專案來處理。對於 Vue 專案而言,Vue CLI 目前初始化已經變成了這個 lint plugin,此外 eslint 官方也對 TypeScript 的 lint有個美好的規劃
我的配置
目前我在使用一個配置好的 Vue 專案的 lint 配置,主要也就用到了上文所說的 standard + vue plugin:
{ "parserOptions": { "parser": "babel-eslint" }, "extends": ["plugin:vue/recommended", "standard"], "rules": { "semi": ["error", "always"], "space-before-function-paren": ["error", "never"], "vue/array-bracket-spacing": ["error", "always"], "vue/component-name-in-template-casing": ["error", "kebab-case"] } }
stylelint
在過去我一直以為 CSS 是沒有 lint 工具規範的,畢竟市面上啥牛鬼蛇神都有,之前也沒有注意到有專案在用這個東西,這次由於規範程式碼的緣故接觸到了 stylelint,結果發現確實挺好的,支援了主流的 css 前處理器和後處理器(就是 sass / stylus / scss / less / postcss)以及原生的 CSS,使用時你只要引入一個外掛,在配置一下就行了。
比如我這個專案使用的是 webpack + postcss(順便一提我很喜歡 postcss),因此只要引入一下 stylelint 的 webpack 外掛,配置一下customSyntax: 'postcss-html'
,就可以在 Vue 中使用 postcss 的 lint。
此外,和 eslint 一樣,你可以通過檔案來配置它,這是我的配置可以參考一下(根本沒什麼參考價值拉):
{ "extends": "stylelint-config-recommended" }
在 Vue 中,除了以上配置外,在 template file 中需要規定<style lang="postcss">
,否則會被讀成 plain css,造成 lint 錯誤。
最後,為什麼我們要使用 lint 工具
在之前的一段不怎麼愉快的經歷中,我努力的推廣了一些 Code Review 規範,但是由於程式碼中的歷史包袱嚴重,所以可能大家都不是很樂意執行,一次團體的 Code Review 提醒了我,可以用 lint 工具去規範這些行為,第一是改動成本小,第二是--fix
可以儘可能的幫助我們修復老的程式碼,之前我們覺得老程式碼可能需要很大的成本去改動,但實際上 Code Style 的修復我花了一天就搞定了——而帶來的好處其實是顯著的:
從此程式碼更容易維護了,畫風更加統一了。那樣程式碼的可讀性也會隨之提高,我們可以避免一些情況下去猜測已離職同事的想法,配合上 Code Review 的流程(包括了人工的變數名和註釋的檢查),可以儘可能的將程式碼的可維護性提高到一個高度。
當然,總的而言這套標準還是頗為嚴格的,在我剛入職時,我就被airbnb
的規範逼瘋過,實在是太嚴格了,然後向現實低了頭(這也是為什麼我喜歡用standard
的原因之一)。
嚴格的規範對於程式碼質量的提升其實是相當明顯的,JavaScript 這一門怎麼都能跑起來的語言從某種意義上確實會降低人的嚴謹程度,作為一個有追求的程式設計師,今後我會在每一個專案都配上這些必要的 lint 工具,你呢?