JavaScript Standard Style

インストール

JavaScript Standard Styleを使用する最も簡単な方法は、Nodeのコマンドラインプログラムとしてグローバルインストールすることです。ターミナルで次のコマンドを実行してください。： ```bash $ npm install standard --global ``` または、`standard`を一つのプロジェクトで使うためにローカルインストールできます。： ```bash $ npm install standard --save-dev ``` *注：上記のコマンドを実行するには、[Node.js](http://nodejs.org)と[npm](https://npmjs.com)がインストールされている必要があります。*

使い方

`standard`をインストールしたら、`standard`プログラムが使用できるはずです。最もシンプルな使用例は、現在の作業ディレクトリ内のすべてのJavaScriptファイルのスタイルをチェックすることです。： ```bash $ standard Error: Use JavaScript Standard Style lib/torrent.js:950:11: Expected '===' and instead saw '=='. ``` `standard`をローカルにインストールした場合は、かわりに`npx`で実行します。: ```bash $ npx standard ``` globパターンを用いてディレクトリを渡すこともできます。globパターンを含むパスは、シェルではなく`standard`で展開されるようにクォートで囲んでください。： ```bash $ standard "src/util/**/*.js" "test/**/*.js" ``` **注：** デフォルトでは、`standard`は次のパターンに一致するすべてのファイルを探索します。：`**/*.js`、`**/*.jsx`

賢いあなたがすべきこと

1. 以下を`package.json`に追加します ```json { "name": "my-cool-package", "devDependencies": { "standard": "*" }, "scripts": { "test": "standard && node my-tests.js" } } ``` 2. スタイルは`npm test`を実行する際に自動的にチェックされます ```bash $ npm test Error: Use JavaScript Standard Style lib/torrent.js:950:11: Expected '===' and instead saw '=='. ``` 3. もう二度とプルリクエストでスタイルのフィードバックをさせないでください！

なぜJavaScript Standard Styleを使うべきなのですか？

JavaScript Standard Styleの美しさは、シンプルなことです。作業しているすべてのモジュール/プロジェクトのために、数百行のスタイル設定ファイルをいくつも管理したい人はいません。こんな狂気はもうたくさんです！このモジュールは、3つの方法であなた（と他の人！）の時間をセーブします。： - **設定なし** プロジェクトに一貫性のあるスタイルを適用する最も簡単な方法です。 - **コードを自動的にフォーマット** ただ`standard --fix`を実行し、汚いコードや一貫性のないコードにサヨナラしましょう。 - **スタイルの問題やプログラマーのエラーを早期にキャッチ** レビュアーと作業者の間の往復をなくすことで、貴重なコードレビューの時間をセーブします。 `standard`なスタイルを採用することは、個人のスタイルよりもコードの明確さやコミュニティの慣習を重要視することを意味します。これはプロジェクトと開発文化にとって100%意義があるわけではありませんが、オープンソースは初学者には適さない場所になりえます。コントリビューターの期待を明確にすることで、プロジェクトがより健全な状態になります。より詳しくは、["Write Perfect Code with Standard and ESLint"](https://www.youtube.com/watch?v=kuHfMw8j4xk)をご覧ください。このトークでは、リントについて、`standard`と`eslint`の使い分けについて、そして`prettier`との比較について学ぶことができます。

誰がJavaScript Standard Styleを使用していますか？

[

](https://nodejs.org) | [

](https://www.npmjs.com) | [

](https://github.com) | [

](https://www.elastic.co) | |---|---|---|---| [

](http://expressjs.com) | [

](http://electron.atom.io) | [

](https://nuxtjs.org/) | [

](https://atom.io) | |---|---|---|---| | [

](https://www.mongodb.com) | [

](https://www.zendesk.com) | [

](https://www.brave.com) | [

](https://zeit.co) | |---|---|---|---| | [

](https://nodesource.com) | [

](http://www.nearform.com) | [

](https://www.typeform.com) | [

](https://gds.blog.gov.uk) | |---|---|---|---| | [

](https://www.heroku.com) | [

](https://saucelabs.com) | [

](https://automattic.com) | [

](https://www.godaddy.com) | |---|---|---|---| | [

](https://webtorrent.io) | [

](https://ipfs.io) | [

](https://datproject.org) | [

](https://bitcoinjs.org) | |---|---|---|---| | [

](https://voltra.co) | [

](https://www.treasuredata.com) | [ Free MIDIs, MIDI file downloads

](https://bitmidi.com) | [ College essays, AP notes

](https://www.apstudynotes.org) | |---|---|---|---| | [

](https://www.optiopay.com) | [

](https://www.jlrtechincubator.com/jlrti/) | [

](https://www.bustle.com) | [

](https://www.zentrick.com) | |---|---|---|---| | [

](https://greenkeeper.io) | [

](https://karma-runner.github.io) | [

](https://www.taser.com) | [

](https://www.neo4j.com) | |---|---|---|---| | [

](https://rentograph.com) | [

](https://www.eaze.com) | [

](https://www.ctrlaltdeseat.com) | [

](https://clevertech.biz) | |---|---|---|---| | [

](https://aragon.org) | [

](https://www.flowsent.com) | [

](https://www.pumabrowser.com/) | [

](https://www.jetbrains.com/webstorm/) | |---|---|---|---| | [

](https://www.fastify.io) | [

](https://www.scuttlebutt.nz) | [

](https://solid.inrupt.com) | [

](https://www.grab.com) | |---|---|---|---| | [

](https://jublia.com/) | Your logo here | Your logo here | Your logo here | |---|---|---|---| 企業に加えて、多くのコミュニティメンバーがここに載せるには[多すぎる](https://raw.githubusercontent.com/standard/standard-packages/master/all.json)パッケージで`standard`を使用しています。 `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]** をインストールしてください。あるいは、 **[linter-js-standard-engine][atom-4]** をインストールしてもよいでしょう。バンドルされた`standard`のバージョンではなく、プロジェクトにインストールされているバージョンが自動的に使用されます。また、 **[standard-engine][atom-5]** を元にした他のリンターでも動作します。自動フォーマットには、 **[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 [atom-4]: https://atom.io/packages/linter-js-standard-engine [atom-5]: https://github.com/standard/standard-engine ### Visual Studio Code **[vscode-standard][vscode-1]** をインストールしてください（自動フォーマットもサポートしています）。 JavaScriptのスニペットには、 **[vscode-standardjs-snippets][vscode-2]** をインストールしてください。Reactのスニペットには、 **[vscode-react-standard][vscode-3]** をインストールしてください。 [vscode-1]: https://marketplace.visualstudio.com/items?itemName=standard.vscode-standard [vscode-2]: https://marketplace.visualstudio.com/items?itemName=capaj.vscode-standardjs-snippets [vscode-3]: https://marketplace.visualstudio.com/items?itemName=TimonVS.ReactSnippetsStandard ### Vim **[ale][vim-1]** をインストールしてください。そして、次の行を`.vimrc`ファイルに追加してください。 ```vim let g:ale_linters = { \ 'javascript': ['standard'], \} let g:ale_fixers = {'javascript': ['standard']} ``` これは、standardをJavaScriptファイルのための唯一のリンターとして設定し、eslintとの競合を防ぎます。保存時に自動でリントと修正を行なうには、次の行を`.vimrc`に追加してください。： ```vim let g:ale_lint_on_save = 1 let g:ale_fix_on_save = 1 ``` 考慮すべき他のプラグインには[neomake][vim-2]や[syntastic][vim-3]があり、いずれも`standard`のビルトインサポートを備えています（設定が必要かもしれませんが）。 [vim-1]: https://github.com/w0rp/ale [vim-2]: https://github.com/neomake/neomake [vim-3]: https://github.com/vim-syntastic/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 extension registryで **["Standard Code Style"][brackets-1]** を検索し、"Install"をクリックしてください。 [brackets-1]: https://github.com/ishamf/brackets-standard/ ### WebStorm（PhpStorm、IntelliJ、RubyMine、JetBrainsなど） WebStormでは、IDEで`standard`が[ネイティブサポートされるようになりました。](https://blog.jetbrains.com/webstorm/2017/01/webstorm-2017-1-eap-171-2272/) `standard`を手動で設定したい場合、[こちらのガイド][webstorm-1]に従ってください。これは、PhpStorm、IntelliJ、RubyMineなど、すべてのJetBrains製品に適用されます。 [webstorm-1]: webstorm.md

readme用のバッジはありますか？

はい！プロジェクトで`standard`を使っているなら、コードがstandardスタイルを使用していることを示すためにこれらのバッジをreadmeに含めることができます。 [![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard) ```md [![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard) ``` [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ```md [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ```

私はあるルールに反対なのですが、変更してもらえますか？

いいえ。`standard`のすべては、スタイルについての[bikeshedding][bikeshedding]（自転車置き場の議論）を避けることであなたの時間をセーブするためにあります。タブ対スペースについてのような議論はオンライン上にたくさんありますが、決して結論は出ません。これらの議論はただ物事を終わらせることから目を逸らさせるだけです。結局のところ、あなたは何かを選ばなければなりません。これは、`standard`の哲学のすべてです。うまくいけば、ユーザーは自身の意見を守るうえでその価値に気づくでしょう。 `standard`を完全には受け入れたくない人のために、似たようなパッケージが2つあります: - [semistandard](https://github.com/standard/semistandard) - セミコロンありのstandard - [standardx](https://github.com/standard/standardx) - カスタマイズ可能なstandard 本当に何百ものESLintのルールを個別に設定したいなら、ルールを上書きするために[eslint-config-standard](https://github.com/standard/eslint-config-standard)で`eslint`を直接使うことができます。[`standard-eject`](https://github.com/josephfrazier/standard-eject)は、`standard`から`eslint`と`eslint-config-standard`への移行を支援します。 Pro tip: ただ`standard`を使っていってください。時間をかけて解決すべき現実の問題があるでしょう！ :P [bikeshedding]: https://www.freebsd.org/doc/en/books/faq/misc.html#bikeshed-painting

でもこれは本当のウェブ標準ではありません！

もちろん違います！ここに記載されたルールはいかなるウェブ標準グループにも属していません。これは、このリポジトリが`standard/standard`であり、、`ECMA/standard`ではないゆえんです。 "standard"という言葉には、単なる"ウェブ標準"よりも多くの意味があります。 :-) たとえば： - このモジュールは、コードを高い*品質基準*に保つのに役立ちます。 - このモジュールは、新たなコントリビューターがいくつかの基本的な*スタイル基準*に従うことを保証します。

自動フォーマッターはありますか？

はい！ほとんどの問題を自動的に修正するために、`standard --fix`が使えます。 `standard --fix`は、最大限の利便性のために`standard`にビルトインされています。ほとんどの問題は修正可能ですが、いくつかのエラー（エラーのハンドルし忘れなど）は手動で修正する必要があります。時間をセーブするために、`standard`は自動的に修正可能な問題を検出すると"`Run standard --fix to automatically fix some problems`"というメッセージを出力します。

ファイルを無視するには？

特定のパス（`node_modules/`、`coverage/`、`vendor/`、`*.min.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を直接使用した場合、通常どおりエラーを非表示にすることができます。特定の行の **すべてのルール** を無効にするには： ```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の機能、プロポーザルプロセスの「ステージ4」にある言語機能の提案を含むES8（ES2017）をサポートしています。実験的な言語機能をサポートするため、`standard`はJavaScriptのカスタムパーサーを指定することができます。カスタムパーサーを使用する前に、複雑さに見合う価値があるかどうかをよく考えてください。カスタムパーサーを使用するには、まずnpmから以下をインストールしてください。： ```bash npm install @babel/eslint-parser --save-dev ``` そして、次のコマンドを実行します。： ```bash $ standard --parser @babel/eslint-parser ``` あるいは、次の内容を`package.json`に追加してください。： ```json { "standard": { "parser": "@babel/eslint-parser" } } ```

FlowやTypeScriptのようなJavaScriptの代替言語を使用できますか？

`standard`は最新のECMAScriptの機能をサポートしています。しかしながら、FlowやTypeScriptは言語に新たな構文を追加するため、そのまま使用することはできません。 JavaScriptの代替言語をサポートするため、`standard`は変更された構文をハンドルするためのESLintプラグインはもちろん、JavaScriptのカスタムパーサーの指定をサポートしています。JavaScriptの代替言語を使う前に、複雑さに見合う価値があるかどうかをよく考えてください。 ### Flow Flowを使用するには、`@babel/eslint-parser`をパーサとして、`eslint-plugin-flowtype`をプラグインとして`standard`を実行する必要があります。 ```bash npm install @babel/eslint-parser eslint-plugin-flowtype --save-dev ``` そして、次のコマンドを実行します。： ```bash $ standard --parser @babel/eslint-parser --plugin flowtype ``` あるいは、次の内容を`package.json`に追加してください。： ```json { "standard": { "parser": "@babel/eslint-parser", "plugins": [ "flowtype" ] } } ``` *注： `plugin`と`plugins`は同じです。* ### TypeScript standardをTypeScriptファイルで使用するには、公式にサポートされた2つの方法があります。 **[`ts-standard`](https://github.com/standard/ts-standard)** `standard`に似ていますが、TypeScript固有のCLIオプションとルールを持っています。このプロジェクトでは、ルールとして`eslint-config-standard-with-typescript`を使用しています。 **[`eslint-config-standard-with-typescript`](https://github.com/standard/eslint-config-standard-with-typescript)** standardスタイルのJavaScriptとTypeScriptのルールを持ったESLint設定ファイルです。

Mocha、Jest、Jasmine、QUnitなどはどうすれば？

テストファイルでmochaをサポートするには、次のコメントをテストファイルの先頭に追加します。： ```js /* eslint-env mocha */ ``` あるいは、次のコマンドを実行してください。： ```bash $ standard --env mocha ``` `mocha`は`jest`、`jasmine`、`qunit`、`phantomjs`などのいずれかになります。完全なリストを見るには、ESLintの[specifying environments](http://eslint.org/docs/user-guide/configuring.html#specifying-environments)を参照してください。これらの環境で使用可能なグローバルオブジェクトのリストについては、[globals](https://github.com/sindresorhus/globals/blob/master/globals.json)のnpm moduleを参照してください。 *注： `env`と`envs`は同じです。*

Web WorkersとService Workersはどうすれば？

次のコメントをweb workerファイルの先頭に追加してください。： ```js /* eslint-env worker */ ``` これにより、`self`がweb workerのコードでグローバルであることを（コードを読んでいる人だけでなく）`standard`に知らせます。 Service workersには、かわりに次のコメントを追加してください。： ```js /* eslint-env serviceworker */ ```

警告とエラーの違いは？

`standard`は、すべてのルール違反をエラーとして扱います。つまり、0以外の終了コード（エラー）で終了するということです。しかしながら、我々はときどき`standard`のユーザーの大多数に影響を与えうるルールを変更するような、新しいメジャーバージョンをリリースすることがあります（たとえば、`var`から`let`、`const`への移行など）。これを行なうのは、利点がコストに見合うと考えられ、かつルールが[自動修正可能](#is-there-an-automatic-formatter)な場合に限られます。このような状況では、ルールの変更を「警告」に留めた「移行期間」を設けています。警告は、`standard`に0以外の終了コード（エラー）を返させません。しかしながら、警告メッセージは依然としてコンソールに表示されます。移行期間中に`standard --fix`を使うと、次のメジャーバージョンに備えてあなたのコードが更新されます。我々は、`standard`でゆっくりと慎重なアプローチに励んでいます。我々は一般的に、新しい言語機能の使用を強制することに関して極めて保守的です。我々は`standard`を気軽で楽しいものにしたいので、その妨げになるような変更には留意しています。いつも通り、必要に応じていつでもルールを無効にすることができます。

MarkdownやHTMLファイル内のコードをチェックできますか？

Markdownファイル内のコードをチェックするには、[`standard-markdown`](https://www.npmjs.com/package/standard-markdown)を使用してください。あるいは、MarkdownやHTML、その他多くの言語ファイル内のコードをチェックできるESLintプラグインがあります。 Markdownファイル内のコードをチェックするには、次のESlintプラグインを使用してください。： ```bash $ npm install eslint-plugin-markdown ``` そして、コードブロック内のJavaScriptをチェックするために次のコマンドを実行します。： ```bash $ standard --plugin markdown '**/*.md' ``` HTMLファイル内のコードをチェックするには、次のESlintプラグインを使用してください。： ```bash $ npm install eslint-plugin-html ``` そして、`