stylent+prettier+VScode에서 매우 완벽한 CSS를 묘사하였다

이 보도
"ESLight를 사용했지만 CSS를 향한 것도 있을 텐데...?
아니, 있어!그리고 그것을 ESLight 같은 느낌으로 만들면 VS코드도 괜찮아요. 저장할 때 사각지대가 없어요!"
이런 사람을 향해.

컨디션

VSCode 1.12.2

Node.js14.13.0(괜찮아)

가져오기

노드 설정

우선, 필요한 포장을 설치한다.yarn add -D stylelint prettier stylelint-prettier stylelint-config-prettierORnpm install --save-dev stylelint prettier stylelint-prettier stylelint-config-prettier이렇게 해서 인로의 설치를 완성하였다.
이어서 제작.stylelintrc.js, 다음과 같은 내용을 추가합니다.
스타일-lint이니까 스타일-lint가 아니에요. 여기 조심하세요!
.stylelintrc.js

module.exports = {
  plugins: [
    "stylelint-prettier",
  ],
  extends: [
    "stylelint-prettier/recommended",
    "stylelint-config-prettier",
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
};

VScode 설정

먼저 공식 발표확장성를 설치한다.
VScode의settings.json에 추가source.fixAll.stylelint.
settings.json

"editor.codeActionsOnSave": {
  ...なにか,
  "source.fixAll.stylelint": true
},

이상은!그리고 적절한 CSS 파일로 저장할 때 유효한 형식이죠.

보태다

정식stylent-prettier 사용

이전에는 공식에서 확장되지 않았기 때문에 주로 제3자가 만든 것을 사용했지만 공식에서 확장되었다.
추가 확장/설치를 사용한 경우 여기 기사.를 참조하여 환승하십시오.

order,config 등이 많은데 어떤 것을 쓰면 좋을까요?

결론적으로 상술한 포장과stylelint-config-standard과stylelint-config-recess-order를 추천합니다.
그리고 그 순간.stylelintrc.js은 이런 느낌이었다.
.stylelintrc.js

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

그러면 본론으로 들어가면 styllelint의 config와order는 모두 저장된 config의 덮어쓰기입니다.
예를 들어 stylelint-prettier/recommended에서 "max-line-length": null로 지정되더라도 extends의 stylelint-prettier/recommended 아래에도 stylelint-config-standard가 있고 봉인된 config에 "max-line-length": 40로 기재되면 40에 덮어씌운다.
기본적으로 뒤에 기술된 규칙(아래의 규칙)이 우선이다.
따라서 order는 단순한 기호일 뿐, 느낌이 좋은 사람은 order를 반복해서 사용하면 뒤에 기술한 것만 사용하고 먼저 기술한 것은 결국 덮인다는 것을 알아야 한다.그래서 config를 선택할 때 조금 주의해야 합니다.
...비록 이렇게 말하지만, 나도 단지 문서를 대충 읽었을 뿐이다.

끝맺다

이것은 어제 혈안 조사의 정보입니다. styllelint 자체는 완전한 초보자라고 할 수 있습니다. 만약 무슨 잘못이 있으면 지적해 주십시오.
무슨 문제가 있으면 받아들이세요.

참고 자료

styllelint 가져오기 및 VS 코드 설정 방법

styllelint의 VScode 확장은 어떤 게 좋을까요?