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) |
|---|---|---|---|
회사 이외에 많은 커뮤니티 회원은 여기에 나열하기에는 [너무 많은](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
**[ale][vim-1]** 를 설치합니다.
For automatic formatting on save, add these lines to `.vimrc`:
저장시 자동포멧을 적용하려면 해당 코드를 `.vimrc`에 추가하세요.
```vim
autocmd bufwritepost *.js silent !standard --fix %
set autoread
```
고려해야 할 대체 플러그인으로는 [neomake][vim-2] 및 [syntastic][vim-3]이 있으며, 둘 다 표준에 대한 지원이 내장되어 있습니다. (추가적으로 구성이 필요할 수도 있습니다)
[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]** 를 설치하고 **[manual][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, etc.)
WebStrom은 `standard`가 직접적으로 IDE에서 사용가능다고 [기본적인 지원에 관한 최근 발표](https://blog.jetbrains.com/webstorm/2017/01/webstorm-2017-1-eap-171-2272/) 했습니다.
만약 수동으로 `standard`를 구성하려면 [안내서]([webstorm-1])를 따르십시오. 이것은 PhpStorm, IntelliJ, RubyMine 등 모든 JetBrains 제품에 적용됩니다.
[webstorm-1]: docs/webstorm.md
## readme에 넣을 수 있는 뱃지로고가 있나요?
네! 프로젝트에서 `standard`를 사용한다면, readme에 이 뱃지들 중 하나를 포함시켜 코드가 standard 스타일을 사용하고 있음을 사람들에게 알릴 수 있습니다.
[](https://github.com/standard/standard)
```md
[](https://github.com/standard/standard)
```
[](https://standardjs.com)
```md
[](https://standardjs.com)
```
## 나와는 룰이 맞지 않습니다. 변경 가능합니까?
안됩니다. `standard`의 전체적인 요점은 코드 스타일에 대한 [bikeshedding][bikeshedding]을 피함으로써 시간을 절약하는 것입니다. 탭과 공백 등에 관해서는 온라인으로 많은 논쟁이 있기때문에 해결되지 않을 것입니다. 이러한 논쟁은 어떠한 것도 얻지 못하게합니다. 결국 `뭔가를 골라야 한다`입니다. 그것은 `standard`의 철학입니다. 이는 `단지 뭔가를 선택하세요`라는 의견입니다. 바라건대, 사용자들이 자신들의 의견을 방어하는 것에 대해 가치를 보게 되기를 바랍니다.
수백 개의 ESLint 규칙을 개별적으로 구성하려는 경우 `eslint`를 직접 [eslint-config-standard](https://github.com/standard/eslint-config-standard)와 함께 사용하여 변경 사항을 맨 위에 배치 할 수 있습니다.
팁 : 표준을 사용하고 계속 진행하십시오. 당신의 시간을 소비하고 있는 실질적인 문제를 해결하세요! :P
[bikeshedding]: https://www.freebsd.org/doc/en/books/faq/misc.html#bikeshed-painting
## 그러나 이 것은 실제 웹표준이 아닙니다!
물론 표준이 아닙니다! 여기에 제시된 스타일은 공식 웹 표준 그룹과 관련이 없으므로 `ECMA/standard`이 아닌 `feross/standard`라고하는 이유입니다.
"standard"이라는 단어는 "web standard"이상의 의미를 가지고 있습니다 :-)
예를 들어,
- 이 모듈은 우리의 코드를 높은 수준의 품질로 유지하는 데 도움이됩니다.
- 이 모듈은 새로운 기여자가 몇 가지 기본 스타일 표준을 준수하도록합니다.
## 자동으로 포멧을 맞춰주는 것이 있나요?
예! `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 표준 스타일은 [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 */
```
## 전역 namespace를 오염시키는 라이브러리를 사용합니다. "vaiable is not defined" 오류를 방지하려면 어떻게 해야 하나요?
일부 패키지 (예 : `mocha`)는 전역 개체 (가난한 형태!)에 기능 (예 : `describe`, `it`)을 지정합니다. 이 함수는 정의되지 않았거나 코드의 어느 곳에서든지 요구 될 수 있기 때문에 `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`는 제안 프로세스의 "단계 4"에있는 언어 기능 제안을 포함하여 최신 ECMAScript 기능인 ES8 (ES2017)을 지원합니다.
실험용 언어 기능을 지원하기 위해 `standard`는 맞춤 JavaScript 파서를 지정하는 것을 지원합니다. 커스텀 파서를 사용하기 전에 추가 된 복잡성이 그럴 가치가 있는지 고려하십시오.
```bash
$ standard --parser babel-eslint
```
혹은, `package.json`에 아래코드를 추가하세요.
```json
{
"standard": {
"parser": "babel-eslint"
}
}
```
`standard'가 전역으로 설치되면 (즉,`npm install standard --global`), `babel-eslint`를 `npm install babel-eslint --global`과 함께 설치하십시오.
## Flow와 같은 JavaScrpt 언어 변형을 사용할 수 있나요?
커스텀 JS 언어 변형을 사용하기 전에 추가된 복잡성 (그리고 새로운 기여자를 최신으로 만드는데 필요한 노력)이 그만한 가치가 있는지 고려하십시오.
`standard`는 ESLint 플러그인을 지원합니다. `standard` 중 하나를 보기 전에 코드를 유효한 JavaScript로 변환하려면 이 중 하나를 사용하십시오. 맞춤 구문 분석기를 사용하려면 npm에서 설치하고 다음을 실행하십시오.
```bash
$ standard --plugin 플러그인_이름
```
아니면, `package.json`에 아래 코드를 추가하세요.
```json
{
"standard": {
"plugins": [ "플러그인_이름" ]
}
}
```
Flow를 사용하려면 `babel-eslint`를 파서로 사용해야합니다. 따라서 `npm install eslint-plugin-flowtype babel-eslint`를 수행한 후에, 다음을 실행하십시오.
```bash
$ standard --plugin flowtype --parser babel-eslint
```
아니면, `package.json`에 아래 코드를 추가하세요.
```json
{
"standard": {
"plugins": [ "flowtype" ],
"parser": "babel-eslint"
}
}
```
`standard`가 전역으로 설치된 경우 (즉, `npm install standard --global`) `npm install-eslint-plugin-flowtype --global`을 사용하여 `eslint-plugin-flowtype`을 전역으로 설치해야합니다.
**참고 : 플러그인 및 플러그인은 동일합니다.**
## Mocha, Jasmine, QUnit 등은 어떻습니까?
테스트 파일에서 mocha를 지원하려면 테스트 파일의 시작 부분에 다음을 추가하십시오.
```js
/* eslint-env mocha */
```
혹은 다음을 실행하세요.
```bash
$ standard --env mocha
```
`mocha`는 `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 모듈을 확인하십시오.
**참고 : `env` 및 `envs`는 동일합니다.**
## Web Workes는 어떻습니까?
적용하려는 파일 상단에 아래 주석코드를 추가하세요.
```js
/* eslint-env serviceworker */
```
이것은 `standard` (자신의 코드를 읽는 사람뿐만 아니라)이 web worker 코드에서 `자신`이 전역(global)이라는 것을 알 수 있게 해줍니다.
## Markdown 또는 HTML 파일 내부의 코드를 확인할 수 있나요?
Markdown 파일 내의 코드를 확인하려면 [`standard-markdown`](https://www.npmjs.com/package/standard-markdown)을 사용하십시오.
또는 Markdown, HTML 및 기타 여러 유형의 언어 파일에서 코드를 확인할 수있는 ESLint 플러그인이 있습니다.
Markdown 파일 내의 코드를 확인하려면 ESLint 플러그인을 사용하십시오.
```bash
$ npm install eslint-plugin-markdown
```
그런 다음, 코드 블록 안에있는 JS를 확인하려면 다음을 실행하십시오.
```bash
$ standard --plugin markdown '**/*.md'
```
HTML 파일 내부의 코드를 확인하려면 ESLint 플러그인을 사용하십시오.
```bash
$ npm install eslint-plugin-html
```
그런 다음, `