JavaScript Standard Style
English • Español (Latinoamérica) • Italiano (Italian) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin)
](https://www.npmjs.com) | [
](https://github.com) | [
](https://opbeat.com) | [
](http://www.nearform.com) | [
](https://www.brave.com) |
|---|---|---|---|---|
| [
](https://zeit.co) | [
](https://www.zendesk.com) | [
](https://www.mongodb.com) | [
](https://www.typeform.com) | [
](https://gds.blog.gov.uk) |
|---|---|---|---|---|
[
](http://expressjs.com) | [
](https://webtorrent.io) | [
](https://ipfs.io) | [
](https://datproject.org) | [
](https://bitcoinjs.org) |
|---|---|---|---|---|
[
](https://atom.io) | [
](http://electron.atom.io) | [
](https://voltra.co) | [
](https://www.treasuredata.com) | [
](https://clevertech.biz) |
|---|---|---|---|---|
[
](https://www.apstudynotes.org) | [
](https://www.optiopay.com) | [
](https://www.jlrtechincubator.com/jlrti/) | [
](https://www.bustle.com) | [
](https://www.zentrick.com) |
|---|---|---|---|---|
[
](https://nodesource.com) | [
](https://greenkeeper.io) | [
](https://karma-runner.github.io) | [
](https://www.taser.com) |
|---|---|---|---|---|
除了公司之外，非常多的社群也在套件中採用了 `standard` [因為太多了](https://raw.githubusercontent.com/feross/standard-packages/master/all.json) 無法在此一一列舉。
`standard` 也是 GitHub 的
[Clean Code Linter](https://github.com/showcases/clean-code-linters) 中，最多人給星的專案。
## 有文字編輯器的外掛嗎？
首先，安裝 `standard`。接下來，就可以依據你使用的編輯器安裝對應的外掛了：
### Sublime Text
使用 **[Package Control][sublime-1]** 安裝 **[SublimeLinter][sublime-2]** 和
**[SublimeLinter-contrib-standard][sublime-3]**。
如果想要在儲存時自動修改樣式，可以安裝 **[StandardFormat][sublime-4]**.
[sublime-1]: https://packagecontrol.io/
[sublime-2]: http://www.sublimelinter.com/en/latest/
[sublime-3]: https://packagecontrol.io/packages/SublimeLinter-contrib-standard
[sublime-4]: https://packagecontrol.io/packages/StandardFormat
### Atom
安裝 **[linter-js-standard][atom-1]**.
如果想要在儲存時自動修改樣式，可以安裝 **[standard-formatter][atom-2]**。或是安裝 **[standardjs-snippets][atom-3]** 可以使用自動補完。
[atom-1]: https://atom.io/packages/linter-js-standard
[atom-2]: https://atom.io/packages/standard-formatter
[atom-3]: https://atom.io/packages/standardjs-snippets
### Visual Studio Code
安裝 **[vscode-standardjs][vscode-1]**. (包含自動修改樣式的支援。)
需要 JS 自動補完，可以安裝： **[vscode-standardjs-snippets][vscode-2]**。 需要 React 自動補完，可以安裝： **[vscode-react-standard][vscode-3]**。
[vscode-1]: https://marketplace.visualstudio.com/items/chenxsan.vscode-standardjs
[vscode-2]: https://marketplace.visualstudio.com/items?itemName=capaj.vscode-standardjs-snippets
[vscode-3]: https://marketplace.visualstudio.com/items/TimonVS.ReactSnippetsStandard
### Vim
安裝 **[Syntastic][vim-1]**，然後把以下加到 `.vimrc` 中:
```vim
let g:syntastic_javascript_checkers = ['standard']
```
如果想要在儲存時自動修改樣式，加入以下到 `.vimrc` 中：
```vim
autocmd bufwritepost *.js silent !standard --fix %
set autoread
```
[vim-1]: https://github.com/scrooloose/syntastic
### Emacs
安裝 **[Flycheck][emacs-1]** 然後查看 **[使用手冊][emacs-2]** 學習如何在專案中使用。
[emacs-1]: http://www.flycheck.org
[emacs-2]: http://www.flycheck.org/en/latest/user/installation.html
### Brackets
搜尋 **["Standard Code Style"][brackets-1]** 然後按 "Install".
[brackets-1]: https://github.com/ishamf/brackets-standard/
### WebStorm (PhpStorm, IntelliJ, RubyMine, JetBrains, etc.)
WebStorm [近期發佈了原生支援](https://blog.jetbrains.com/webstorm/2017/01/webstorm-2017-1-eap-171-2272/)，可以直接在 IDE 中使用 `standard`。
如果你還是傾向要手動設定 `standard`，[可以參考這個教學][webstorm-1]。這可以套用至所有 JetBrains 的產品，包括 PhpStorm、IntelliJ、RubyMine 等等。
[webstorm-1]: docs/webstorm.md
## 有 README 專用的 standard 徽章嗎？
可以！如果你在專案中使用了 `standard`，你可以在 README 中加入以下的徽章，讓大家知道你的程式碼使用了 standard 的標準。
[](https://github.com/standard/standard)
```md
[](https://github.com/standard/standard)
```
[](https://standardjs.com/)
```md
[](https://standardjs.com/)
```
## 我不同意某條規定，你們可以改一下嗎？
不行。`standard` 的重點就是在於避免那些對於程式碼的風格[永遠不會有答案的爭議上][bikeshedding]，像是從古至今就在爭論的 tab vs 空白等等。這些問題是永遠不會被解決的，但永無止盡的爭論卻會讓大家分心不做正事。最後你還是得決定去「選擇其中一個」，這就是 `standard` 的哲學 —— 一大堆合理的「選擇其中一個」。幸運的是，很多採用 standard 的使用者已經發現使用後獲得的成果已經比捍衛自己的偏見好多了。
如果你真的非常想要去客製化設定幾百行的規則，應該直接去用 `eslint` 和 [eslint-config-standard](https://github.com/standard/eslint-config-standard)，可以把你想要的規則列在最前面。
專業建議：就直接用 `standard` 然後開始吧。把時間花在那些你真正該解決的問題上吧！:P
[bikeshedding]: https://www.freebsd.org/doc/en/books/faq/misc.html#bikeshed-painting
## 但這不是真實網路中的標準！
這當然不是！這個風格訂定並不是隸屬於什麼正式網路團體的，所以這個專案才叫做 `feross/standard` 而不是
`ECMA/standard`.
"standard" 這個字的意義比 "web standard" 的意義來得多 :-)。舉例來說：
- 這個模組讓你的程式碼有很高的 *standard of quality* 。
- 這個模組確保新的貢獻者遵循基本的 *style standards*。
## 有自動修正的工具嗎？
有的！你可以用 `standard --fix` 去自動化修正某些問題。
`standard --fix` 為了方便直接內建在 `standard` 裡面。大部分的問題都是可以解決的，但一些問題（像是忘記處理錯誤）則必須要手動修正。
為了省下你寶貴的時間，`standard` 如果偵測到發生的問題是可以被自動修正的話，
會輸出 "`Run standard --fix to
automatically fix some problems`" 。
## 如何忽略某些檔案？
一些路徑 （`node_modules/`、`coverage/`、`vendor/`、`*.min.js`、`bundle.js` 和 `.` 開頭的檔案和資料夾，像是 `.git/`）會自動被忽略。
專案根目錄下 `.gitignore` 中列出來的路徑也會被自動忽略。
有時候你還是需要去忽略一些資料夾或一些最小化後的檔案，可以在 `package.json` 中加個 `standard.ignore` 屬性：
```json
"standard": {
"ignore": [
"**/out/",
"/lib/select2/",
"/lib/ckeditor/",
"tmp.js"
]
}
```
## 如何隱藏某些警告？
在少數情況下，你需要去打破一些規則，然後隱藏 `standard` 產生的警告。
JavaScript Standard Style 底層是使用 [ESLint](http://eslint.org/)，所以你可以直接使用 ESLint 的語法隱藏。
為了拿到詳細的輸出（讓你知道特定規則的名稱好去忽略），可以執行：
```bash
$ standard --verbose
Error: Use JavaScript Standard Style
routes/error.js:20:36: 'file' was used before it was defined. (no-use-before-define)
```
在特定行數忽略 **所有規則**：
```js
file = 'I know what I am doing' // eslint-disable-line
```
或是 **只** 忽略 `"no-use-before-define"` 這條規則：
```js
file = 'I know what I am doing' // eslint-disable-line no-use-before-define
```
或是 **一次在很多行** 忽略 `"no-use-before-define"`：
```js
/* eslint-disable no-use-before-define */
console.log('offending code goes here...')
console.log('offending code goes here...')
console.log('offending code goes here...')
/* eslint-enable no-use-before-define */
```
## 我使用的套件庫污染了全域變數，該如何避免出現 "variable is not defined" 錯誤？
有些套件（像是 `mocha`）把他們的函式（像是 `describe`、`it`）放到了全域下（不好的方式）。因為這些函式沒有在你的程式碼裡面被宣告或 `require`，`standard` 會警告你使用了未宣告的變數（這個規則通常很實用，可以抓到打錯字），但我們希望去忽略這些全域變數。
為了讓 `standard`（和其他讀程式碼的人）知道某些變數是可以直接被使用的，把這幾行加入檔案開頭：
```js
/* global myVar1, myVar2 */
```
如果你有幾百個檔案，應該很不想去每個檔案裡加註解。這時可以執行：
```bash
$ standard --global myVar1 --global myVar2
```
或在 `package.json` 中加上：
```json
{
"standard": {
"globals": [ "myVar1", "myVar2" ]
}
}
```
*注意： `global` 和 `globals` 是可以互通的。*
## 如何使用實驗性質的 JavaScript (ES Next) 新語法？
`standard` 支援最新的 ECMAScript 語法 ES8 (ES2017)，包含所有在新語法提議過程中，已經進入 "階段四" 的提議。
為了支援實驗性質的語法，`standard` 支援客製化 JavaScript 語法解析器。在使用客製化語法解析器前，請考慮清楚是否值得去增加這些複雜度。
要使用客製化語法解析器，可以從 npm 安裝（比如說：`npm install babel-eslint`），然後執行：
```bash
$ standard --parser babel-eslint
```
或在 `package.json` 中加入：
```json
{
"standard": {
"parser": "babel-eslint"
}
}
```
如果你是把 `standard` 裝在全域下（就是 `npm install standard --global`），那麼請確保 `babel-eslint` 也是用 `npm install babel-eslint --global` 裝在全域下。
## 我可以使用 JavaScript 的變體，像是 Flow 嗎？
在使用客製化的 JS 變體前，請考慮增加這些複雜度（和跟上所需要的人力）是否值得。
`standard` 支援 ESLint 外掛。在使用 `standard` 先使用其中一種把你的程式碼先轉換成正規的 JavaScript 語法。可以從 npm 安裝客製化的語法解析器（比如說：`npm install eslint-plugin-flowtype`）然後執行：
```bash
$ standard --plugin flowtype
```
或在 `package.json` 中加入：
```json
{
"standard": {
"plugins": [ "flowtype" ]
}
}
```
如果 `standard` 是在全域安裝（也就是 `npm install standard --global`），那麼請確保 `eslint-plugin-flowtype` 也是用 `npm install eslint-plugin-flowtype -g` 裝在全域下。
*注意： `plugin` 和 `plugins` 是可以互通的。*
## Mocha、Jasmine、QUnit 等等套件呢？
為了支援 mocha，在檔案開頭加入：
```js
/* eslint-env mocha */
```
或執行：
```bash
$ standard --env mocha
```
其中 `mocha` 也可以是 `jasmine`、`qunit`、`phantomjs` 等等其他的選擇，可以去 ESLint 看更多 [可以指定的環境](http://eslint.org/docs/user-guide/configuring.html#specifying-environments) 。要檢查哪些全域變數在這些環境是可以用的，可以查看 [globals](https://github.com/sindresorhus/globals/blob/master/globals.json)。
*注意： `env` 和 `envs` 是可以互通的。*
## Web Workers 呢？
在檔案開頭加入：
```js
/* eslint-env serviceworker */
```
就可以讓 `standard` （還有其他讀程式碼的人）知道 `self` 在 web worker 裡是一個全域變數。
## 可以檢查 Markdown 或 HTML 檔裡面的程式嗎？
要檢查 Markdown 裡的程式，可以用 [`standard-markdown`](https://www.npmjs.com/package/standard-markdown)。
也可以使用 ESLint 的套件，檢查 Markdown, HTML 和其他種類的文件中的程式：
用 ESLint 套件 `eslint-plugin-markdown` 來檢查 Markdown 中的程式，先安裝：
```bash
$ npm install eslint-plugin-markdown
```
就可以檢查 Markdown 中的 JavaScript 程式碼：
```bash
$ standard --plugin markdown '**/*.md'
```
用 ESLint 套件 `eslint-plugin-html` 來檢查 HTML 中的程式，先安裝：
```bash
$ npm install eslint-plugin-html
```
就可以檢查 `