순풍 CSS 클래스 자동 정렬

스티브 잡스가 사과로 돌아왔을 때, 그는 매일 같은 검은색 상의를 입고 있다는 결정을 내리지 않기로 했다.그는 이제 해방되었으니 낮에 더 중요한 결정을 내릴 수 있다.나는 매일 작은 결정을 하고 있다. 나는 자유를 얻고 싶다. 나는 나의 순풍 CSS 과정의 순서를 결정하고 싶지 않다.
나는 이 일을 하기 위해 도구를 원한다.오늘과 미래 팀의 모든 사람들이 지속적으로 사용할 도구.
더 이상 HTML에서 CSS 클래스의 순서를 결정할 필요가 없습니다.

<div class="flex flex-grow-0 justify-between items-center px-2 -mt-7 text-xs text-white uppercase">
  <div class="flex items-center space-x-2">
    <div class="flex justify-center items-center w-5 h-5 text-gray-900 rounded-full bg-brand-primary-surface">

Tailwind CSS 유틸리티 클래스가 첫 번째이고 사용자 정의 클래스가 맨 뒤에 있는 것으로 알려져 있습니다.유틸리티 클래스의 순서는 무엇입니까?왜 flex 이전에, w-5 이전에?
누가 신경 써?너도 몰라.다음 도구로 작업을 완성하십시오. 모든 CSS 클래스가 똑같아 보이고 보기 좋습니다.
다음과 같은 세 가지 도구가 있습니다.

Headwind - 저장할 때 CSS 클래스 정렬을 위한 VS 코드 확장

Rustywind - 모든 파일을 동시에 업데이트할 수 있는 CSS 클래스의 CLI

Overcommit - text-gray-900 동안 rustywind --write를 실행하여git

에 파일을 보내기 전에 파일을 업데이트합니다.
업데이트: git commit 설치rustywind를 통해 문제가 해결되었습니다. package.json 스크립트에 봉인해야 합니다.

역풍

내가 사용하는 것은 VS 코드인데, 그 전형적인 특징은 화려한 지역사회 확장 라이브러리이다.VS 코드에서는 파일을 저장할 때 설치된 확장자를 하나 이상 실행할 수 있습니다.이것은 똑똑한 자동 포맷 파일이기 전에 디스크에 맞았다.파일의 모든 CSS 클래스 이름을 포맷하기 위해 이 갈고리를 사용합니다.
입력Headwind.
Install it into VS Code, HTML 파일로 이동하여 파일을 다시 저장하고 펑!!모든 CSS 클래스 이름 시퀀스가 일관되게 순서재정리됩니다.

녹바람

이것은 너에게 매우 좋다.VS 코드 확장을 설치했습니다.불행히도, 정태적으로 말하자면, 당신의 동료는 Vim을 사용합니다.너는 그들이 누군지 안다. 왜냐하면 그들은 너에게 알려줄 것이다.
따라서 프로젝트에서 일하는 모든 사람들이 CSS 클래스 이름 목록을 같은 도구로 포맷할 수 있도록 조치를 취합니다.
입력Rustywind.이것은 CLInpm run rustywind-fix로 npm을 통해 설치되지만 Rust로 작성됩니다.나도 네가 할 수 있을지 모르겠다.
Rustywind의 영감은 역풍에서 온 것으로 알고 있지만, 지금은 역풍 자체로 보인다.괜찮은데.rustywind를 사용하여 개별 파일을 수정할 수 있습니다.

rustywind path/to/my/template.html --write

또는 모든 파일을 수정합니다.

rustywind . --write

모든 사람이 rustywind를 설치했는지 확인하려면 rustywind 또는 package.json를 사용하여 프로젝트npm에 추가하십시오.

$ yarn install -D rustywind

# or

$ npm i --save-dev rustywind

모든 사람이 다음에 yarn 또는 rustywind를 실행할 때 프로그램에 설치된다npm i.
다음에 yarn에 로컬 npm 스크립트를 만듭니다.

  "scripts": {
    "rustywind-fix": "rustywind --write ."
  },

이제 라이브러리 개발자는 다음과 같은 방법으로 로컬package.json에 액세스할 수 있습니다.

npm run rustywind-fix

과도한 승낙

마지막으로 여러분들이 계속 달리기를 하도록 도와줍시다rustywind.또는 적어도 Git 저장소에 파일을 제출하기 전에 파일을 실행합니다.
갈고리rustywind에 익숙하면 git 명령을 만들거나 편집하고 실행할 수 있음을 알 수 있습니다.에이, 이git 갈고리들은 너에게 있어서 현지의 것이다.너의 갈고리는 다른 사람과 같다는 것을 보장할 수 없다..git/hooks/pre-commit 포맷을 사용하고 있지만 다른 사람은 없습니다.
다행히도,git 갈고리를 공유하여 예쁘게 만들 수 있습니다.얼마나 예뻐요?

그래, 알아, 너 지금 갖고 싶어.
입력Overcommit: Git 갈고리를 관리하고 구성하는 도구입니다.
Rustywind를 실행하는 프로젝트에 대한 구성 파일rustywind . --write을 만듭니다.

PreCommit:
  Rustywind:
    enabled: true
    required: true
    command: ['npm', 'run', 'rustywind-fix']

현재, 이 rustywind 파일을git 리콜 루트 디렉터리에 추가했습니다. 우리는 현재 모든 사람들이 더 큰 이익을 위해 뭔가를 해야 합니다.Overmit을 설치하고 로컬 git 클론을 활성화해야 합니다.
Overmit은 RubyGem으로 배포되는 CLI입니다.

gem install overcommit

항목이 .overcommit.yml이 있는 Ruby 항목인 경우 gem을 추가합니다.

group :development do
  # A fully configurable and extendable Git hook manager
  gem "overcommit"
end

및 실행.overcommit.yml.난 이게 제일 좋아.
모든 사람에게 두 번째 수동 단계는 Git 갈고리를 활성화하는 것이다.모든 사람은 달리기를 해야 한다.

overcommit

감사합니다.너는 세상을 더욱 아름답게 만들고 있다.그 다음으로 순수한 탄소 배출.
모든 개발자는 현재 다음 제출 시 Rustywind를 볼 수 있습니다.

$ git commit -a -m "Doing the things"
Running pre-commit hooks
Run Rustywind.............................................[Rustywind] OK

✓ All pre-commit hooks passed

만약 Ruby 개발자이고 모든 사람이 Ruby formatter와 linter StandardRB를 실행하기를 원한다면 Gemfile 파일을 확장하십시오:

PreCommit:
  Rustywind:
    enabled: true
    required: true
    command: ['npm', 'run', 'rustywind-fix']
  StandardRB:
    enabled: true
    required: true
    command: ['bundle', 'exec', 'standardrb'] # Invoke within Bundler context
    flags: ['--fix']

커밋 시 두 명령bundle install과 .overcommit.yml이 동시에 실행됩니다.

$ git commit -a -m "Doing the things"
Running pre-commit hooks
Run Rustywind.............................................[Rustywind] OK
Run StandardRB...........................................[StandardRB] OK

✓ All pre-commit hooks passed

퇴위의 자유

"그런데 저는 Rustywind가 반을 정렬하는 순서에 동의하지 않습니다!"
프로그래밍 언어가 공백인 문법 포맷 프로그램이든, CSS 클래스의 순서를 선호하는 소형 도구든, 하나만 선택하면 당신보다 더 관심을 가질 수 있습니다.그것은 한 번 또 한 번 자신의 일을 할 것이다.
너는 정말 종류의 순서에 별로 신경 쓰지 않고 무료, 즉각, 공유 가능, 미관, 일치하는 도구를 사용하지 않니?