🍡

Next.js + Sass(SCSS記法) + ESlint + Stylelint + Prettier の環境構築

2023/01/24に公開

この記事ではNext.jsの環境構築について解説していきます。

ESLintなど様々な機能を導入できるので是非参考にしてみてください。また、ターミナルを最低限触れる方であれば再現できるように、細かく丁寧に解説しています。


使用技術・できるようになること

  • Next.js(TypeScriptは未使用)
  • Sass(SCSS記法)
  • ESLint(JavaScriptの構文チェック)
  • Stylelint(CSSの構文チェック、プロパティの自動並び替え、アンパサンド(&)禁止など)
  • Prettier(保存時にコード自動整形)
  • Visual Studio Code(テキストエディタ)
  • pages/styles/をひとつのフォルダにまとめる
  • ファイルを絶対パスで読み込めるようになる(エイリアス)

解説すること・しないこと

解説する内容はあくまで環境構築までです。なので、環境構築に関する設定ファイルなどの解説はしますが、Next.jsの機能や他のファイルに関しては特に解説していません。

Next.jsを基礎から学びたい方は、しまぶーさんのYouTubeがおすすめです。全17回もあり、とても丁寧に解説してくれています。

YouTubeのvideoIDが不正ですhttps://www.youtube.com/playlist?list=PLwM1-TnN_NN6fUhOoZyU4iZiwhLyISopO

基礎を学んだ後は、こちらのチャンネルもおすすめです。microCMSなどのAPI連携や問い合わせフォームからメールを送る方法など発展的な内容を学べます。

YouTubeのvideoIDが不正ですhttps://www.youtube.com/playlist?list=PLT5klp7W4r8T0sf5EbgOtkna44hHgVxae


環境構築を始める前に

Node.jsをインストールしていない方はインストールしておいてください。

https://nodejs.org/ja/download/

https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b


Next.jsのプロジェクトを作成

まず、Next.jsをインストールしたいディレクトリにターミナルで移動します。

そこで以下コマンドを実行します(プロジェクト名がフォルダ名になります)。

ターミナル
$ npx create-next-app プロジェクト名

すると、以下のように質問されると思います。

// TypeScriptを使いますか?
Would you like to use TypeScript with this project? … No / Yes
// ESLintを使いますか?
Would you like to use ESLint with this project? … No / Yes

ターミナルアプリにもよると思いますが、左右キーでYesかNoを選択できると思うので、どちらも「No」を選択してエンターキーを押します。

※ESLintは後ほどインストールします

インストールされたかを確認する

インストールが終わると、先程入力したプロジェクト名でフォルダが作られると思うので、そこに移動します。

その後、以下コマンドを実行してローカルサーバーを立ち上げます。デフォルトURLは http://localhost:3000/ です。

ターミナル
$ cd プロジェクト名
$ npm run dev

http://localhost:3000/ にアクセスして以下のような画面が表示されれば成功です。


ダークモードの画面(通常モードの場合は背景が白になるはずです)


pages/styles/をひとつのフォルダにまとめる

プロジェクト直下にあるpages/styles/をひとつのフォルダにまとめます。こうすることで、乱立しやすいコンポーネント系をひとつのフォルダにまとめてプロジェクト内を見やすくします。

まず、src/フォルダをプロジェクト直下に作り、その中にpages/styles/を移動します。

次に、プロジェクト直下に設定ファイル.jsconfig.jsを作ります。

.jsconfig.js
module.exports = {
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "src"
  }
}

baseUrlに先程作成したフォルダ名のsrcを指定します。

jsxに関して詳しく知りたい方はこちらの記事で詳しく解説してくれています。

https://zenn.dev/uhyo/articles/react17-new-jsx-transform

ファイルを保存したら、再度 http://localhost:3000/ にアクセスしてみます。

無事表示されれば成功です。もし表示されなかったらサーバーを再起動してみましょう。

https://fwywd.com/tech/next-base-url


ファイル読み込みを相対パスから絶対パスに変える(エイリアスの設定)

デフォルトのファイルの読み込み方は相対パスになっています。

読み込みの例
import styles from '../styles/Home.module.css'

これだと、自身の場所によっては大量の../を書く羽目になり、流石に不便で可読性も悪いので絶対パスで読み込めるように変更します。

next.config.jsを開き、以下のように編集します。

next.config.js
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    config.resolve.alias['@'] = path.join(__dirname, 'src')
    return config;
  },
}

module.exports = nextConfig

const path = require('path');webpack(...)を追加しました。

試しにsrc/pages/_app.jsglobals.cssの読み込み方を変えてみます。エラーが出なければ成功です。

_app.js
import '../styles/globals.css'
// ↓
import '@/styles/globals.css'

@には、next.config.jsで指定したsrcが代入されています。この書き方のことを「エイリアス」と呼びます。

https://t-cr.jp/memo/3cc17944875d1463


ESlintの導入

ESlintとはJavaScriptの静的検証ツールです。構文ミスによるバグを見つけたり、括弧やインデントなど人によってバラバラになりそうなルールを統一してくれます。

コードの検証にはVSCodeの拡張機能を用います。

パッケージのインストール

まずはESlintに関するパッケージをインストールします。

$ npm i -D eslint eslint-config-next eslint-config-prettier

拡張機能のインストール

VSCodeのESLintの拡張機能をインストールします。

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

設定ファイルの作成

プロジェクト直下に.eslintrc.jsを作成します。

.eslintrc.js
module.exports = {
  // ルールをまとめて追加
  "extends": [
    "next/core-web-vitals",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "prettier"
  ],
  // 個別ルール
  "rules": {
    // importするファイルをアルファベット順に自動で並び替える
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
    // importのパスにエイリアス('@/components/xxxxx')を使うとエラーになるのでそれを防ぐ
    "import/no-unresolved": "off"
  }
}

ここでは様々なルールやプラグインの設定を行います。

extendsにはプラグインを定義しており、おすすめ設定やコアウェブバイタルに関する設定を入れています。

https://zenn.dev/thiragi/articles/555a644b35ebc1

package.jsonの編集

package.jsonscriptsにLint用コマンドを追加します。

package.json
"scripts": {
    // 割愛
    "lint": "next lint --dir src",
    "lint:fix": "next lint --fix"
  },

--dir srcオプションを付けることで、srcフォルダのみを対象とさせます。


StyleLintの導入

SASS記法に対するStyleLintの導入について

結論、SASS記法に対してStyleLintの導入はできませんでした。
後述するstylelint-config-recommended-scssなどのプラグインがSASS記法には対応していなかったからです(導入すると大量のエラーが出る)。
なので、もしSASS記法に対してStyleLintを導入したい場合は自分でルールの作成などをする必要がありそうです。
もしいい方法など知っている方がいたらコメント頂けると嬉しいです。🙏

導入の流れはESLintとほぼ同じです。

パッケージのインストール

まずはStyleLintに関するパッケージをインストールします。ついでにSassもインストールしておきます。

$ npm i -D sass
$ npm i -D stylelint stylelint-config-recess-order stylelint-config-recommended-scss

拡張機能のインストール

VSCodeのStyleLintの拡張機能をインストールします。

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

設定ファイルの作成

プロジェクト直下に.stylelintrc.jsを作成します。

.stylelintrc.js
module.exports = {
  extends: ["stylelint-config-recess-order", "stylelint-config-recommended-scss"],
  rules: {
    // ::before, ::afterのコロンを2つにする
    "selector-pseudo-element-colon-notation": "double",
    // クラス名でアンパサンド(&)は禁止(&:hoverなどはOK)
    "scss/selector-no-union-class-name": true,
    // シングルクォーテーションに統一
    "string-quotes": "single",
  },
  ignoreFiles: ["**/node_modules/**"],
};

stylelint-config-recommended-scssは様々なルールを導入してくれるプラグインです。また、これより厳格な stylelint-config-standard-scss というプラグインもあります。

これらに関してはこちらの記事で詳しく解説されています。

https://lab.astamuse.co.jp/entry/stylelint

他にもプロパティの自動並び替えやアンパサンド(&)禁止などのルールを追加しています。特にCSSプロパティは人によって書き方が全く違うので、是非入れることをおすすめします。

https://zenn.dev/ignorant_kenji/articles/b331600a5c48d0

https://iwb.jp/css-stylelint-vscode-settings-rules/

package.jsonの編集

package.jsonscriptsにLint用コマンドを追加します。

package.json
"scripts": {
    // 割愛
    "lint:style": "stylelint '**/*.{css,scss,sass}'",
    "lint:style:fix": "stylelint --fix '**/*.{css,scss,sass}'"
  },

Prettierの導入

先程設定したESLintとStyleLintをファイル保存時に実行されるようにします。こうすることで、保存時に構文チェックと自動整形を同時に行ってくれます。

パッケージのインストール

まずはPrettierに関するパッケージをインストールします。

$ npm i -D prettier

拡張機能のインストール

VSCodeのPrettierの拡張機能をインストールします。

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

VSCodeの設定ファイルの作成

プロジェクト直下に.vscodeのフォルダを作り、その中にsettings.jsonファイルを作成します。

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

このような形で設定ファイルを作成することで、現在開いているワークスペースのみにここで定義した設定を適用できます。

Prettierの設定ファイルの作成

プロジェクト直下に.prettierrc.js.prettierignoreを作成します。

.prettierrc.js
module.exports = {
  trailingComma: 'all', // 可能な限り末尾にカンマを付ける
  tabWidth: 2, // インデントのスペースの数
  semi: true, // ステートメントの最後にセミコロンを追加
  singleQuote: true, // シングルクォートに統一
  jsxSingleQuote: true, // JSXでダブルクォートの代わりにシングルクォートを使用する
  printWidth: 100, // 折り返す行の長さ
  singleAttributePerLine: true, // ひとつの属性ごとに改行する
};
.prettierignore
*.md

.prettierignoreには自動整形してほしくないファイルを定義します。

https://zenn.dev/ryusou/articles/nodejs-prettier-eslint2021#vscodeの設定はeditor.codeactionsonsaveとeditor.defaultformatterを設定しよう

https://zenn.dev/shimakaze_soft/articles/57642e22124968

package.jsonの編集

package.jsonscriptsにPrettier用コマンドを追加します。

package.json
"scripts": {
    // 割愛
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'",
  },

自動整形の検証

これでようやく自動整形の設定が終わりました。

.js.jsx.scssなどを編集して保存してみてください。自動で整形されたら成功です(うまく動かなかったらVSCodeを再起動してみましょう)。

CSSプロパティやimportファイルの自動並び替えには感動しました。🙌


package.json

package.jsonは何度も編集したので、最終形をこちらに載せておきます。

package.json
{
  "name": "next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src",
    "lint:fix": "next lint --fix",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'",
    "lint:style": "stylelint '**/*.{css,scss,sass}'",
    "lint:style:fix": "stylelint --fix '**/*.{css,scss,sass}'"
  },
  "dependencies": {
    "next": "13.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.32.0",
    "eslint-config-next": "^13.1.2",
    "eslint-config-prettier": "^8.6.0",
    "prettier": "^2.8.3",
    "sass": "^1.57.1",
    "stylelint": "^14.16.1",
    "stylelint-config-recess-order": "^3.1.0",
    "stylelint-config-recommended-scss": "^8.0.0"
  }
}

最終的なディレクトリ構成

今回解説した内容全てが終わった時のディレクトリ構成も載せておきます(デフォルトの.gitignoreなどは除外してあります)。

ディレクトリ構成
.vscode/
node_modules/
public/
src/
.eslintrc.js
.jsconfig.js
.prettierignore
.prettierrc.js
.stylelintrc.js
next.config.js
package-lock.json
package.json

参考記事

以下記事の他にも、記事中で様々な参考記事を掲載させて頂きました。🙏

https://qiita.com/ganja_tuber/items/95507e658ecfef7e9457

https://wemo.tech/3307

https://zenn.dev/hungry_goat/articles/b7ea123eeaaa44


サンプルコード

https://github.com/dadada0220/Next.js-Sass-ESlint-Stylelint-Prettier

ネクスキャット テックブログ

Discussion

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