社内でコーディングを依頼することになり、ある程度ルールがある中でコードを書いてほしいと思い今回コーディング用のボイラープレートを作成しました。
使ってもらってより良い設定があればこの記事とGitHubのコードも更新していこうかと思っています
完成品
ライブラリ等
Vite プロジェクトの作成
$ npm create vite@latest ✔ Project name: … coding_boilerplate ✔ Select a framework: › vanilla ✔ Select a variant: › vanilla $ cd coding_boilerplate
- framework は
vanillaを選択します。
開発場所になるディレクトリの作成
1. vite.config.js ファイルを新規に作成し以下のように入力します。
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ root: 'src', build: { outDir: '../dist' } })
2. 次に src ディレクトリを作成し index.html, main.js, style.css, favicon.svg を 作成したディレクトリに移動させます。
$ mkdir src $ mv index.html main.js style.css favicon.svg src/.
3. サーバーを起動し localhost:3000 にアクセスし表示できるか確認します。
$ npm run dev
Sass のインストール
$ npm install --save-dev sass
ファイル名を変更する
$ mv src/style.css src/style.scss
// src/main.js import './style.scss'
Prettier のインストール
$ npm install --save-dev prettier
// .prettierrc
{
"printWidth": 120,
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"trailingComma": "none"
}
.prettierignore dist/ node_modules/
ESLint のインストール
必要なライブラリをインストールします。
$ npm install --save-dev eslint eslint-config-prettier
eslint-config-prettierを導入すると Prettierと競合する ESLint のルールを無効化することができます。
ESLint のセットアップをします。
$ npx eslint --init ✔ How would you like to use ESLint? · style ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · none ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ How would you like to define a style for your project? · guide ✔ Which style guide do you want to follow? · standard ✔ What format do you want your config file to be in? · JSON ✔ Would you like to install them now? · Yes ✔ Which package manager do you want to use? · npm
生成されたファイルが以下になります。
// .eslintrc.json { "env": { "browser": true, "es2021": true }, "extends": [ "standard" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": [ "@typescript-eslint" ], "rules": { } }
Stylelint のインストール
必要なライブラリをインストールします。
$ npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss stylelint-config-recess-order
stylelint-config-prettier-scssを導入すると Prettierと競合する Stylelint のルールを無効化することができます。
Stylelintのセットアップをします。
// .stylelintrc.json { "plugins": [], "extends": [ "stylelint-config-standard-scss", "stylelint-config-prettier-scss", "stylelint-config-recess-order" ], "rules": { "color-no-invalid-hex": true, "comment-no-empty": true }, "ignoreFiles": ["./node_modules/**", "./dist/**"] }
スクリプトの追加
// package.json { ... "scripts": { ... "lint": "npm run lint:prettier && npm run lint:eslint && npm run lint:style ", "lint:prettier": "prettier --check --loglevel=warn '**/*.{js,ts,scss}'", "lint:eslint": "eslint '**/*.{js,ts}'", "lint:style": "stylelint '**/*.{css,scss}'", "format": "npm run format:prettier && npm run format:eslint && npm run format:style", "format:prettier": "prettier --check --write --loglevel=warn '**/*.{js,ts,scss}'", "format:eslint": "eslint --fix '**/*.{js,ts}'", "format:style": "stylelint --fix '**/*.{css,scss}'" }, ...
テンプレートの導入
コーディングする際にヘッダーやフッターなどパーシャル(サイトの繰り返し部分)と呼ばれる部品を組み合わせることができます。
必要なライブラリをインストールします。
$ npm install --save-dev vite-plugin-handlebars
設定ファイルを変更します。
$ vite.config.js import { resolve } from 'path' // 追加 import { defineConfig } from 'vite' import handlebars from 'vite-plugin-handlebars' // 追加 export default defineConfig({ root: 'src', build: { outDir: '../dist' }, // 追加 plugins: [ handlebars({ partialDirectory: resolve(__dirname, 'src/partials'), context: { title: 'Coding boilerplate' } }) ] })
$ mkdir src/partials
// src/partials/header.html <header> <a href="/">Home</a> </header>
// src/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{{ title }}</title> <!-- 修正 --> </head> <body> {{> header }} <!-- 追加 --> <div id="app"></div> <script type="module" src="/main.js"></script> </body> </html>
これでレイアウトを実現することができます。
Docker 用の設定追加
# Dockerfile FROM node:16.14-buster-slim WORKDIR /app EXPOSE 3000
# docker-compose.yml
version: '3.8'
services:
node:
build:
context: .
tty: true
command: "npm run dev"
ports:
- "${NODE_PORT:-8080}:3000"
volumes:
- ".:/app"
# Makefile
RUN := run --rm
DOCKER_COMPOSE_RUN := docker-compose $(RUN)
init:
@make build
@make npm_install
build:
docker-compose build
rebuild:
docker-compose build --force-rm --no-cache
up:
docker-compose up
upd:
docker-compose up -d
down:
docker-compose down
attach:
docker attach (docker-compose ps -q app)
npm_install:
${DOCKER_COMPOSE_RUN} node npm install
lint:
${DOCKER_COMPOSE_RUN} node npm run lint
format:
${DOCKER_COMPOSE_RUN} node npm run format
app_build:
${DOCKER_COMPOSE_RUN} node npm run build
down.all:
if [ -n "`docker ps -q`" ]; then docker kill `docker ps -q`; fi
docker container prune -f
// vite.config.js ... export default defineConfig({ root: 'src', // 追加 server: { host: true }, ...
$ make init $ make upd
http://localhost:8080 にアクセスする
VScode の設定
VSCode の設定も載せておきます
// .vscode/settings.json { "editor.defaultFormatter": "esbenp.prettier-vscode", "css.validate": false, "less.validate": false, "scss.validate": false, "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.stylelint": true }, "stylelint.validate": ["css", "scss"], "stylelint.configFile": "./.stylelintrc.json" }
試しに作ってみて改良の余地ありありなので改善点コメントなどで教えてもらえれば嬉しいです。
