eslint, prettier, tailwindcss Install guide for Nuxt3 release

nuxt3 초기 프로젝트에 eslint, prettier 등 환경 셋업

NuxtJS, NestJS를 이용한 auth 모듈
by hoon

Nuxt3 정식 릴리즈 버전으로 typescript를 사용하고, eslint, prettier 등 개발에 필요한 모듈들과 VueJS, NuxtJS 개발에 필요한 기타 필수 요소 모듈들 적용해봅니다.

필수 선행 및 환경 정보

node.js v16.16.0 (v16)

npx를 설치합니다.

npm install -g npx

typescript를 설치합니다.

npm install -g typescript

Nuxt3에서 기본적으로 typescript로 종속되어있기 때문에 typescript 커맨드를 사용하진 않을거지만, 설치해두도록 합시다.

프로젝트 설치

Nuxt3 설치

npx 커맨드를 이용하여 초기 프로젝트를 설치합니다.

cd proj
npx nuxi init app-name

Eslint, Prettier, typescript 설치

터미널을 열고 아래와 같이 필수 모듈을 설치합니다.

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier typescript @nuxtjs/eslint-config-typescript 

추가로 vue와 nuxt를 위한 eslint 플러그인을 설치합니다.

 yarn add -D eslint-plugin-nuxt eslint-plugin-vue vite-plugin-eslint

nuxt.config.ts 파일에 eslintPlugin 추가

import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({

    vite: {
        plugins: [
            eslintPlugin()
        ]
    }
})

package.json

"scripts": {
    "lint": "eslint \"**/*.{ts,tsx,vue,js}\" --fix",
    "lint-eslint": "eslint --ignore-path .gitignore **/*{ts,tsx,vue,js,json} --fix",
    "lint-prettier": "prettier --write \"**/*.(ts|tsx|vue|js|json)\"",
},

위 모듈 설치가 완료되었으면 아래 터미널에서 초기 설정을 진행합니다.

npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · none
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? › Yes

질문 선택지는 선택사항 옵션이므로 원하는 입맛에 맞춰서 선택하시길 바랍니다.

eslint 설정 파일

위에서 초기 설정을 하고나면 .eslintrc.json파일이 아래와 같이 생성됩니다.

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "ignorePatterns": ["node_modules/*", "dist/*", "!.prettierrc.js"],
    "extends": ["plugin:nuxt/recommended", "plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
    "plugins": ["vue", "prettier"],
    "rules": {
        "prettier/prettier": ["error", {}]
    }
}

위의 코드는 prettier 모듈과 함께 적용합니다.

.prettierrc 파일 생성

.prettierrc.json

{
    "endOfLine": "auto",
    "printWidth": 180,
    "htmlWhitespaceSensitivity": "css",
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "overrides": [
        {
            "files": ["*.test.js", "*.test.jsx", "*.test.ts", "*.test.tsx"],
            "options": {
                "semi": true,
                "trailingComma": "none",
                "singleQuote": true,
                "tabWidth": 4
            }
        },
        {
            "files": ["*.vue"],
            "options": {
                "semi": true,
                "trailingComma": "none",
                "singleQuote": false,
                "tabWidth": 4
            }
        },
        {
            "files": "*.json",
            "options": {
                "printWidth": 200,
                "tabWidth": 4,
                "semi": false,
                "singleQuote": false,
                "bracketSpacing": true,
                "trailingComma": "all"
            }
        }
    ]
}

plugins, extends, rules 옵션에 prettier 항목이 추가되고 변경되었습니다.

package.json에서 등록한 스크립트 lint-prettier 명령어로 코드를 일괄 정리할 수 있습니다. 스크립트 실행이 오류난다면 개인 프로젝트 세팅에 맞게 명령문을 조금만 손보면 됩니다.

TailwindCSS 설치

tailwindCSS 설치에 대하여 👉 참고

프로젝트 경로에 터미널을 열고 아래와 같이 모듈을 설치합니다.

yarn add -D @nuxtjs/tailwindcss @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography postcss

모듈을 설치하고 난 뒤, 터미널에서 초기화 명령어를 실행합니다.

npx tailwindcss --init 

그리고 나서 tailwind.config.js가 생성되며 아래와 같이 코드를 변경해줍니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./components/**/*.{js,vue,ts}",
        "./layouts/**/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./nuxt.config.{js,ts}"
    ],
    theme: {
        extend: {}
    },
    plugins: []
}

assets/styles/tailwind.css도 생성합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.ts

export default defineNuxtConfig({
    css: [
        '@/assets/styles/tailwind.css',
    ],
    modules: [
        '@nuxtjs/tailwindcss',
    ],
    postcss: {
        plugins: {
            'postcss-import': {},
            'tailwindcss/nesting': {},
            tailwindcss: {},
            autoprefixer: {},
        },
    },
})

여기까지 tailwind css 적용이 끝났습니다.

tailwindcss가 제대로 동작되는지 확인해봅니다.

root 경로에 있는 ./app.vue는 지우고 아래와 같이 경로를 생성하고, vue 컴포넌트를 생성합니다.

pages/index.vue

<template>
    <div>
        <h1 class='hover:bg-black hover:text-white text-8xl'>Index</h1>
        <span class="badge text-sm">Test</span>
    </div>
</template>

<script lang="ts"></script>

<style lang="postcss" scoped>
    .badge {
        @apply bg-blue-500 text-white font-bold rounded-full px-3 py-1;
    }
</style>

---

참고 문서

prettier

eslint

https://nuxt.com/

자세한 소스코드는 여기서.

Connet with me