javascript뿐만 아니라 sass/css와 markdown까지 포맷 해주는 prettier.

eslint와 함께 사용해보십시오.
「이거 좋네! 」
그리고 감동.
stylelint와도 연동할 수 있다고 듣고, VScode 와 Atom 로 보존시에 자동 포맷 할 때에 자동으로 포맷을 해 보았다. (2018/07/31)
참고로 한 페이지. 고마워요.

htps : // 코 m / t 키리 / ms / 016 아 9 에 f8 아 25b631 에 7 에 6
htps // 사토 얀 419. 코 m/p 레치에 r/

prettier 준비

자세한 사용법은 여기에서는 생략. . .

설치합니다.

$ yarn add -D prettier

config 파일을 만듭니다. .prettierrc 하지만 .prettierrc.js 등 여러가지 형식으로 곱합니다.

구성 파일

.prettierrc.js

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
};

stylelint 준비

stylelint에서는 다음을하고 싶습니다.

stylelint-config-standard를 기반으로 자신의 규칙도 적용

stylelint-order 를 사용해 프로퍼티을 알파벳순으로 하고 싶다.

프로퍼티의 순서는 여러가지 좋아하는 것이 있다고 생각하므로, 찾기도 좋고 만드는 것도 좋습니다.
자신의 팀에서는 알파벳순이므로, 미리 준비되어 있는 것을 사용했습니다.

stylelint와 stylelint-config-standard, stylelint-order를 각각 설치합니다.

$ yarn add -D stylelint stylelint-config-standard stylelint-order

config 파일을 만듭니다. 이것도 .stylelintrc 하지만 .stylelintrc.js 하지만 여러가지 포맷으로 걸립니다.
덧붙여서, config 파일을 화면에서 포치포치 선택하면 만들 수 있는 서비스가 있었습니다!
htps : // 음 m이 치앙. 기주 b. 이오/스타

.stylelintrc.js

module.exports = {
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: ['stylelint-config-standard'],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    // scssを使うには↓の2つがないと@mixinとかでエラーになってしまう。
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    // ...
    'order/properties-alphabetical-order': true,
  },
};

scss의 @mixin 라든가를 사용하는 경우, 덮어쓰기가 필요 같습니다. (아마)
stylelint에도 포맷 기능이 있고, 그에 따라 prettier가 더욱 포맷 해주는 흐름입니다.

prettier-stylelint

prettier-stylelint 을 사용합니다. prettier-eslint 에 영감을 받은 것 같습니다.

$ yarn add -D prettier-stylelint

stylelint의 config 파일을 맞춥니다.

.stylelintrc.js

module.exports = {
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: [
    './node_modules/prettier-stylelint/config.js',
    'stylelint-config-standard'
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
  rules: {
    // ...
  },
};

여기서 빠졌습니다. prettier-stylelint의 readme 그럼

"extends": [
  "stylelint-config-idiomatic-order",
  "./node_modules/prettier-stylelint/config.js"
],

되었기 때문에,
「오케~. 간단 간단 」

extends: [
  'stylelint-config-standard'
  './node_modules/prettier-stylelint/config.js'
],

로 설정했습니다. 그러면 표준 항목에서 오류가 발생하지 않는 현상에 빠졌습니다. 그래서 extends에 읽혀지는 config를 보면 prettier라고 쓰는 것으로 보이는 규칙이 null이 되어 있습니다.

htps : // 기주 b. 코 m/후고 mrぢ아 s/p레치에 rstyぃぃt/bぉb/마s테 r/곤푸 g. js

이 순서에서는, stylelint-config-standard로 설정한 항목을 config.js 로 상쇄해 버렸습니다.
readme과 같은 extend를 사용할 때는 괜찮다고 생각하지만 extends의 순서는 조심하십시오.

편집기 플러그인 설치

VS Code

Prettier - Code formatter을 설치하고 setting의 prettier.stylelintIntegration를 true로 설정하십시오.
※ 설정이 완료되면 VScode를 다시 시작해야 할 것 같습니다.

아톰

prettier-atom을 설치합니다.
플러그인 설정 화면에서 Stylelint Integration를 확인하십시오.

그건 그렇고

솔직히 scss를 포맷하지 않으면 안된다고 생각한 계기는 scss에 관심이없는 백엔드 엔지니어의 사람이 작성한 코드가 터무니 없었기 때문입니다.
프런트 엔드의 사람으로서 「무무무...」라고 생각하면서도, 백엔드의 사람에게 그것을 지적하는 것도 마음이 든다.
또, 이번 일단 에디터의 플러그인으로 할 수 있도록 했습니다만
"scss를 터치할 때는 Atom이나 VSCode에서 플러그인을 넣어 주세요."
라고도 말하기 어렵기 때문에, pre-commit때에 포맷 한다고 하는 처리를 하고 싶습니다.