⚖️

Next.js+Tailwind CSS+Sass+Eslint+Prettier+StylelintでVSCodeの環境構築

2022/02/24に公開約6,300字

完成品はGitHubにあります。

https://github.com/k-neko3/next-app-ts

エディターはVSCodeを使っています。

Next.jsのインストール

https://nextjs.org/docs/basic-features/typescript
npx create-next-app@latest --ts

create-next-appをTypeScriptで作成します。

srcフォルダ作成

規模が小さいうちはあまり関係ありませんが、ファイルが増えてくるとソースコードが1つのフォルダにまとまっていたほうがわかりやすいので、srcフォルダを作ります。

djangoでプロジェクトを作る時など、他の言語でもsrcフォルダにすることが多いので、慣れているからというのもあります。

Eslintのコマンドなどを使う場合は、srcフォルダが動作対象になるように変更します。

├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── api
│   │   │   └── hello.ts
│   │   └── index.tsx
│   └── styles
│       ├── Home.module.scss
│       └── globals.scss

パスのaliasを作成

コンポーネントの階層が深くなっていくと、importする時のフォルダ指定が複雑になってくるので、パスのaliasの設定をしておきます。

//tsconfig.json
{
  "compilerOptions": {
  
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  
}

以下のように書き換えることができて便利です。

+ import "@/styles/global.scss";
- import '../styles/globals.scss'

Sassをインストール

Scssを使いたいので、インストールします。

npm i sass -D

cssは基本はTailwind CSSで書きますが、外部ファイルでCSSを読み込みたい時もあります。プレーンのCSSでは書きづらい部分も多いので、Sassを入れておきます。

CSSは好みの問題も大きいので、各自で好きなものを選択するのが良いですね。

Next.jsにはデフォルトでCSSモジュールを使えるので、それらと組み合わせて使います。

Tailwind CSSのインストール

npm i -D tailwindcss postcss autoprefixer

tailwind.config.jsを作成

インストール後に設定をします。

設定はTailwind.config.js内に記述します。

npx tailwindcss init -p

Tailwind CSSのv3からはjitモードが普通に使えるようになったので、jitモードを設定します。

contentには対象になるフォルダと拡張子を設定します。以前はpurgeという設定名でしたが、動作と一致する名称に変わってますね。

//tailwind.config.js
module.exports = {
  mode: 'jit',
  content: [
    '.src/pages/**/*.{js,ts,jsx,tsx}',
    '.src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

create-next-appでプロジェクトを作成すると、globals.cssが最初からできていますが、その中にTailwind CSSの設定を加えます。

//globals.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

VSCode用のTailwind CSSプラグイン

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Tailwind CSSのクラス名がサジェストされます。

Hover Previewなども出るので便利です。

クラス名の自動並び変えはPrettierとPrettier用の公式Tailwind CSSプラグインを使います。

Prettierのインストール

PrettierとTailwind CSS用のプラグインと、Eslintと被るルールに対して、Prettierを優先するプラグインを入れます。

何を優先するのかはお好みやプロジェクトのルールによって変わると思います。

npm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier

VSCode用のプラグイン

VSCodeでファイルを保存したときに自動で整形したいので、Prettierのプラグインを入れておきます。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ついでに、Eslintのプラグインも入れておきます。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettierの設定

何も設定しなければ、以下のリンクにあるデフォルトのものが適用されます。

https://prettier.io/docs/en/options.html

アップデートでデフォルト値が変わる時があるので、ここでは設定ファイルにできるだけ明示しておく形を取ります。

また、VSCode用のプラグインに関しても、.prettierrc.jsonの設定にて動くため、混乱を避けるためにも、.prettierrc.jsonを作っておきます。

//.prettierrc.json
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "off"
}

.prettierignoreを作成

自動で整形を保存する際に、対象外とするファイルを設定します。

//.prettierignore
*.md

VSCodeでマークダウンを書くのが好きなのですが、全角文字と半角文字を混在しているマークダウンファイルを、Prettierで自動整形すると、半角文字の前後に半角スペースが挿入されます。

筆者としては望まない動作なので、マークダウンファイルを自動整形の対象から外します。

ただ、VSCodeのコマンド(ctrl + shift + pで出てくるもの)を手動で実行すると、この設定をしていても整形されます。

.eslintrc.jsonの設定

Next.jsではv11ぐらい?から自動でEslintがインストールされます。

その設定にPrettierを加えます。EslintとPrettierで被るルールがある場合、Prettier側のルールが優先される設定です。

//.eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"]
}

prettier-plugin-tailwindcss

このプラグインを入れることで、Prettierで整形するときに、Tailwind CSSのクラスを自動で並び変えてくれます。

ルールを独自に作ったり、人の目で見て修正するのはとても大変なので、このプラグインに頼るのが楽です。並び順にこだわりがある場合は難しいかもですが…。

prettier-plugin-tailwindcssはインストールしておけば自動で読み込まれるため何もしなくてもOKです。

ただ、環境によってはプラグインの記載をする必要があります。詳細は公式で。

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Stylelintのインストール

https://github.com/stylelint/stylelint/blob/main/docs/user-guide/get-started.md

いろんな記事があって戸惑いましたが、結局公式を参考に最低限だけの構成です。

この辺りはお好みやプロジェクトのルールに沿って設定することになります。

スタンダードルールのScss拡張版、Stylelintと被るルールに対して、Prettierを優先する設定、CSSのプロパティを自動で並び変える設定をインストールします。

ほぼ、公式のGetting startedのものです。並び変えだけ追加するような感じです。

npm i stylelint stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-config-recess-order -D

.stylelintrc.jsonの設定

Stylelintは設定をしないと動かないため、設定ファイルを作ります。

先ほどインストールしたルールを記載します。

加えて、Tailwind CSSの除外設定を行います。Tailwind CSSと他のCSSを併用する場合でも、Tailwind CSSの記述を使いたい場合は、applyを良く使うのですが、何もしないとエラーや注意が出るためです。

//.stylelintrc.json
{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order",
    "stylelint-config-prettier-scss"
  ],
  "rules": {
    "scss/at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["apply", "layer", "responsive", "screen", "tailwind"]
      }
    ]
  }
}

VSCodeの拡張機能と設定

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Prettier、Eslint、Stylelintの3つを併用する形になっていますが、混乱しないようにルールを決めて設定します。

ここでのルールは「被る場合はPrettierを優先」「ファイルを保存したときに自動で成型される」「.mdは除外する」です。

また、VSCodeのデフォルトチェック機能があるので、対象となるCSSなどは外します。

//settings.json
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"],

Prettierに関してはVSCode側の動きと設定ファイルが連動するため、Prettierのマークダウン除外設定は、.prettierignoreに設定しておけばVSCode側の保存時でも適用されます。こちらに入れているのは念のため、ぐらいです。

まとめ

構築した環境は以下。

https://github.com/k-neko3/next-app-ts

結構前ですが、Next.jsがcreate-next-appにEslintを含めてきたのと、stylelintのバージョンアップでデフォルトでScssが外されていたことなどから、lint周りを整理しないとな~と思っていたのですが、その結果がこれです。

stylelintを動かすと、ネストだらけのScssを適当に書くとエラーまみれになるので、気が引き締まって良いですね~。

Discussion

ログインするとコメントできます