VSCODE에서 CSS를 포맷하기 전에

6893 단어 CSScombVSCodeCSS

① CSS 형식 및 정렬


CSScomb 확장 기능은 원하는 형식을 만들고 적용할 수 있습니다.
링크에서 녹색 Install 버튼을 누르면 다음과 같은 팝업이 나타나므로 Continue를 누르십시오.

② VS CODE에 CSScomb 설치


VSCODE를 시작하고 Install 을 클릭합니다.
화면이 이미 설치되어 있기 때문에 마운트 해제 선택이 있습니다.

③ 원하는 포맷 만들기


CSScomb Build Config를 열고 원하는 형식을 선택합니다.모두 24문제가 있다.기본적으로 2선이나 3선, 최후의 선택이 모두 가능하다는 뜻이다.

④ 만든 형식 읽기


다음 경로의 json 파일로 완성된 json 파일을 대체합니다.또 원래의 물건은 백업을 잘 하는 것이 가장 좋다.
path
C:\Users\Minato\.vscode\extensions\mrmlnc.vscode-csscomb-5.2.2\node_modules\csscomb\config\csscomb.json

⑤ VS CODE에서 읽은 파일 지정


파일 → 기본 설정 → 설정에서 설정 화면을 열고 다음 내용을 추적합니다.
"csscomb.preset": "csscomb"

⑥ 마지막 포맷


Ctrl+a 등 예뻐지고 싶은 코드를 선택하고 F1에서 확장 기능의 호출 화면을 엽니다.
csscomb 등이 치면 선택 항목이 표시되기 때문에 완료를 누르십시오!

⑦ 경품


내가 좋아하는 격식은 이렇다.가능하다면 전선을 붙일 테니 사용하세요.

minato.json
{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": " ",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

좋은 웹페이지 즐겨찾기