前言
多人開發(fā)通常會(huì)有代碼風(fēng)格不統(tǒng)一的情況，使用不同的編譯器等，造成項(xiàng)目不同代碼文件風(fēng)格不一致，為了解決這個(gè)問題，出現(xiàn)了一些能自動(dòng)格式化的工具，如prettier等。
常見的語法規(guī)則和代碼風(fēng)格檢查工具有ESLint, 代碼風(fēng)格及語法規(guī)則和格式化工具Standard, 代碼格式化工具Prettier
1. ESLint
可組裝的JavaScript/JSX檢查工具，它是一個(gè)由Nicholas C. Zakas于2013年開源的一個(gè)Pluggable Linter for JavaScript/JSX.
其運(yùn)行是根據(jù)默認(rèn)規(guī)則如 ECMAScript 5 語法檢測和用戶自定義規(guī)則進(jìn)行語法檢測，可通過自定義規(guī)則及插件添加其支持的其他類型的JS，如React.js, Vue.js等。
官網(wǎng)對(duì)其的描述:
ESlint 被設(shè)計(jì)為完全可配置的，這意味著你可以關(guān)閉每一個(gè)規(guī)則而只運(yùn)行基本語法驗(yàn)證，或混合和匹配 ESLint 默認(rèn)綁定的規(guī)則和你的自定義規(guī)則，以讓 ESLint 更適合你的項(xiàng)目。
ESLint 允許你指定你想要支持的 JavaScript 語言選項(xiàng)。默認(rèn)情況下，ESLint 支持 ECMAScript 5 語法。你可以覆蓋該設(shè)置，以啟用對(duì) ECMAScript 其它版本和 JSX 的支持。
使用ESLint的流程：
- 首先在項(xiàng)目中或全局通過npm i -g eslint 安裝npm包。
- 在項(xiàng)目根目錄或全局(window默認(rèn)為C盤用戶根目錄)建立配置文件, 以.eslintrc開頭，比如.eslintrc.json或.eslintrc.js等。
- 通過命令行使用 eslint filename將會(huì)對(duì)文件進(jìn)行檢測，支持正則表達(dá)式，對(duì)于發(fā)現(xiàn)的錯(cuò)誤可以使用eslint --fix進(jìn)行部分修復(fù)。
- 與IDE的集成，通常我們都是直接通過IDE,如VSCode結(jié)合插件進(jìn)行代碼語法及風(fēng)格實(shí)時(shí)檢測。
以VSCode為例，需要在Extensions中安裝ESLint插件，可以通過VSCode的setting.json進(jìn)行ESLint規(guī)則配置，也可以在setting.json中指定要使用的配置文件.eslintrc.*地址。
配置詳解：
有兩種主要的方式來配置 ESLint：
- Configuration Comments - 使用 JavaScript 注釋把配置信息直接嵌入到一個(gè)代碼源文件中。
-
Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件為整個(gè)目錄（處理你的主目錄）和它的子目錄指定配置信息?？梢耘渲靡粋€(gè)獨(dú)立的
.eslintrc.*文件，或者直接在package.json文件里的eslintConfig字段指定配置，ESLint 會(huì)查找和自動(dòng)讀取它們，再者，你可以在命令行運(yùn)行時(shí)指定一個(gè)任意的配置文件。
如果你在你的主目錄（通常 ~/）有一個(gè)配置文件，ESLint 只有在無法找到其他配置文件時(shí)才使用它。
配置信息：
- Environments - 指定腳本的運(yùn)行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量。
- Globals - 腳本在執(zhí)行期間訪問的額外的全局變量。
- Parser - 指定解析器，如使用babel-eslint對(duì)新的JS語法進(jìn)行支持。解析器需要通過npm進(jìn)行安裝。
- Plugins - 配置第三方插件，如react, vue，可以省略eslint-plugin前綴
{
"plugins": [
"vue"
]
}
注意：由于 Node.js 的 require 函數(shù)的行為，全局安裝的 ESLint 實(shí)例只能使用全局安裝的 ESLint 插件，本地安裝的版本，只能用 本地安裝 的插件。不支持混合本地和全局插件。
- Rules - 啟用的規(guī)則及其各自的錯(cuò)誤級(jí)別，可添加自定義規(guī)則。
ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則。
要改變一個(gè)規(guī)則設(shè)置，你必須將規(guī)則 ID 設(shè)置為下列值之一：
- "off" 或 0 - 關(guān)閉規(guī)則
- "warn" 或 1 - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
- "error" 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)
對(duì)不想讓eslint進(jìn)行規(guī)則檢測的js代碼可以用以下方式進(jìn)行注釋
/* eslint-disable no-alert, no-console */
alert('foo');
/* eslint-enable no-alert, no-console */
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
/* eslint-disable-next-line */
alert('foo');
alert('foo'); /* eslint-disable-line */
如果在整個(gè)文件范圍內(nèi)禁止規(guī)則出現(xiàn)警告，將 /* eslint-disable */ 塊注釋放在文件頂部：
所有這些選項(xiàng)讓你可以細(xì)粒度地控制 ESLint 如何對(duì)待你的代碼。
- Extends -遞歸擴(kuò)展規(guī)則
一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承。
extends 屬性值可以是：
- 在配置中指定的一個(gè)字符串
- 字符串?dāng)?shù)組：每個(gè)配置繼承它前面的配置
ESLint 遞歸地進(jìn)行擴(kuò)展配置，所以一個(gè)基礎(chǔ)的配置也可以有一個(gè) extends 屬性。
此外eslint也可以擴(kuò)展插件中的配置：
extends 屬性值可以由以下組成：
plugin:- 包名 (省略了前綴，比如，
react) /- 配置名稱 (比如
recommended)
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
}
2. Standard
主要用于統(tǒng)一JavaScript代碼風(fēng)格，集成常見配置，無須編寫配置文件，只要全局安裝或局部安裝后通過CLI進(jìn)行代碼檢查及自動(dòng)修復(fù)。
以下是官方的介紹：
無須配置。 史上最便捷的統(tǒng)一代碼風(fēng)格的方式，輕松擁有。
自動(dòng)代碼格式化。 只需運(yùn)行 standard --fix 從此和臟亂差的代碼說再見。
提前發(fā)現(xiàn)風(fēng)格及程序問題。 減少代碼審查過程中反反復(fù)復(fù)的修改過程，節(jié)約時(shí)間。
無須猶豫。再也不用維護(hù) .eslintrc, .jshintrc, or .jscsrc 。開箱即用。
Standard規(guī)則檢查細(xì)則
使用兩個(gè)空格 – 進(jìn)行縮進(jìn)
字符串使用單引號(hào) – 需要轉(zhuǎn)義的地方除外
不再有冗余的變量 – 這是導(dǎo)致 大量 bug 的源頭!
行首不要以
(,[, or ``` 開頭關(guān)鍵字后加空格
if (condition) { ... }函數(shù)名后加空格
function name (arg) { ... }堅(jiān)持使用全等
===摒棄==一但在需要檢查null || undefined時(shí)可以使用obj == null。處理 Node.js 中錯(cuò)誤回調(diào)傳遞進(jìn)來的
err參數(shù)。使用瀏覽器全局變量時(shí)加上
window前綴
來源
此外也可集成到VSCode等IDE中，安裝standard插件，配置eslint使用standard的代碼風(fēng)格檢查規(guī)則。
eslint類似一個(gè)平臺(tái)，用于檢測和報(bào)告信息，而檢測的標(biāo)準(zhǔn)規(guī)則都是可以自定義的。Standard則包含javascript standard代碼風(fēng)格規(guī)則及自動(dòng)格式化功能，對(duì)ESLint擴(kuò)展，其也可以進(jìn)行配置，使用eslint-plugin, 如在package.json中
{
"standard": {
"parser": "typescript-eslint-parser",
"plugins": [ "typescript" ]
}
}
3. Prettier
Prettier僅僅是代碼格式化工具，它會(huì)移除所有你的代碼風(fēng)格，然后根據(jù)它的編碼風(fēng)格如換行標(biāo)準(zhǔn)，最大長度等，從0開始打印出新的，其不僅支持JS，還支持HTML/CSS。
- JavaScript, including ES2017
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
其僅僅專注于代碼格式化，對(duì)代碼質(zhì)量檢測規(guī)則不做保證和檢測，以下是官方的說明
How does it compare to ESLint/TSLint/stylelint, etc.?
Linters have two categories of rules:
Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...
Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it's not possible for the programmer to make a mistake there anymore :)
Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...
Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!
Prettier配置主要是縮進(jìn)，換行，分號(hào)，單引號(hào)等信息，可以在其以下配置文件中進(jìn)行配置。
- prettierrc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json.
- prettierrc.toml file, written in TOML (the .toml extension is required).
- prettier.config.js or .prettierrc.js file that exports an object.
- "prettier" key in your package.json file.
Prettier可以與ESLint一起使用，只需安裝eslint-plugin-prettier，對(duì)Vue的SFC支持，僅需在.eslintrc.*的extends中添加 "plugin:prettier/recommended",
可參考
module.exports = {
"root": true,
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
}
//https://alligator.io/vuejs/vue-eslint-prettier/
//https://www.futurehosting.com/blog/prettier-vs-eslint-whats-the-difference/
