테일윈드와 import 관련 추천 플러그인

Automatic Class Sorting with Prettier

• 공식 문서 : https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
• tailwind css 공식 Prettier 플러그인
• 테일윈드가 추천하는 기준에 따라 클래스명을 정리해준다.

<!-- Before --> 
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button> 

<!-- After --> 
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

설치

1. 터미널 명령어 이용하여 설치

npm install -D prettier prettier-plugin-tailwindcss

2. Prettier Configuration file을 생성하여 플러그인 추가

// .prettierrc.json
{ "plugins": ["prettier-plugin-tailwindcss"] }

tailwindcss/typography

• 공식문서 : https://tailwindcss.com/docs/typography-plugin
• 테일윈드 공식 typography 플러그인으로, prose 클래스를 사용하여 타이포그래피를 조절할 수 있다.
• 예를 들어, <h1>, <h2>, <p>, <ul>, <ol> 등의 HTML 태그에 대한 스타일을 적용할 수 있다.

설치

1. 터미널 명령어 이용하여 설치

npm install -D @tailwindcss/typography

2. tailwind.config.js 파일에 추가

/** @type {import('tailwindcss').Config} */ 
module.exports = {
	theme: { 
		// ...
	 },
	plugins: [ 
		require('@tailwindcss/typography'), 
		// ...
	],
}

eslint-plugin-import

• 공식문서 : https://github.com/import-js/eslint-plugin-import#eslint-plugin-import
• ES6+ import/export 문법의 린팅을 지원하고, 파일 경로와 import 이름의 오타를 예방한다.
• import 구문의 정렬 규칙을 정할 수 있다.

설치

npm install eslint-plugin-import --save-dev