SCSS에 stylelint와 Prettier 적용

4399 단어 stylelintscssVSCodeprettier

개요


  • SCSS에 대해 stylelint 규칙에 따른 형식 변환을 Prettier에서 수행하고 싶습니다.
  • VSCode의 formatOnSave에서 stylelint와 일치하는 형식이 필요하다는 것이 이상적입니다.
  • 설치할 때 항상 적용된 저장소를 찾는 것이 어려울 수 있으므로 메모하십시오.

    절차


  • 라이브러리 설치
  • stylelint-config-idiomatic-order는 CSS 설명 순서 규칙입니다.
  • 조건은 없지만 어떤 규칙이 없으면 침착하지 않기 때문에 넣고있다 

    • yarn add -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
# or
npm i -D stylelint stylelint-config-idiomatic-order stylelint-config-recommended-scss stylelint-scss prettier-stylelint
  • stylelint 설정 파일 .stylelintrc.js 만들기
  • 싱글 따옴표로 만드는 것은 단순한 선호


    • .stylelintrc
    module.exports = {
  extends: [
    'stylelint-config-idiomatic-order',
    'stylelint-config-recommended-scss',
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    'string-quotes': 'single',
  },
};
  • package.json에 명령 추가
  • yarn lint:css 는 stylelint의 결과를 보는 것만
  • yarn format:css는 stylelint 규칙에 맞게 format을 적용합니다.


    • package.json
    {
  // ...
  "scripts": {
    // ...
    "lint:css": "stylelint \"src/**/*.scss\"",
    "format:css": "prettier-stylelint --write \"src/**/*.scss\""
  }
}
  • VSCode 플러그인 넣기
  • Prettier

  • ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = 에 s ben p. p r rvs 여기


  • Stylelint

  • ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = style t. vs 코데 스티 ぃ t


  • formatOnSave에 체크를 넣으면 이것으로 움직입니다

    • Webstorm의 FileWatcher에서 나오는 "env : node : No such file or directory"오류
    VSCode + Prettier + ESLint 간단한 설정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage