Typescript, eslint, prettier 및 tailwind를 사용하도록 NextJS 프로젝트 설정
6663 단어 typescripttailwindcssnextjs
어떻게 될까요?
Typescript, eslint, prettier 및 tailwind를 사용하도록 Next.js를 설정하는 방법을 배웁니다.
시작
NextJS 프로젝트 초기화
npx create-next-app my-project --typescript
cd my-project
더 예쁘고 에슬린트 설치
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
구성 파일
.eslintrc
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:@typescript-eslint/recommended",
"next",
"next/core-web-vitals",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"]
}
.prettierrc.js
module.exports = {
printWidth: 80,
semi: true,
singleQuote: true,
tabWidth: 2,
useTabs: false,
};
tailwind 설치 및 초기화
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
구성 파일
tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
globals.css에 순풍 추가
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
완료, 이제 typescript, eslint, prettier 및 tailwind가 포함된 NextJS 프로젝트가 있습니다.
Reference
이 문제에 관하여(Typescript, eslint, prettier 및 tailwind를 사용하도록 NextJS 프로젝트 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/vinibgoulart/setting-nextjs-project-to-use-typescript-eslint-prettier-and-tailwind-20m4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npx create-next-app my-project --typescript
cd my-project
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:@typescript-eslint/recommended",
"next",
"next/core-web-vitals",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"]
}
module.exports = {
printWidth: 80,
semi: true,
singleQuote: true,
tabWidth: 2,
useTabs: false,
};
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
@tailwind base;
@tailwind components;
@tailwind utilities;
Reference
이 문제에 관하여(Typescript, eslint, prettier 및 tailwind를 사용하도록 NextJS 프로젝트 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vinibgoulart/setting-nextjs-project-to-use-typescript-eslint-prettier-and-tailwind-20m4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)