フロントエンド環境構築メモ

備忘として。ローカルにプロジェクトを作成した後、実装に入るまで。

前提

• git
• Node.js
• VSCodeにESLintとPrettierをinstall

ローカルでプロジェクト作成～リモートに上げるまで

プロジェクト作成

• 各種ライブラリやフレームワークの公式からコマンド

GitHubでリポジトリを作成(Add a README fileはチェックしない)し、表示されたURLをコピー

$ git init
# (Windows)改行コードをLFに統一
$ git config core.autocrlf false
$ git remote add origin {コピーしたURL}
$ git add --a
$ git commit -m "コメント"
$ git push origin -u main

開発環境を整えるまで

フォーマッタをinstall

$ npm install --save-dev eslint eslint-config-prettier prettier

.settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": true
}

.prettierrc.json

{
  "arrowParens": "avoid",
  "trailingComma": "none",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "bracketSpacing": true,
  "endOfLine": "lf"
}

多くの場合で必要になるライブラリをinstall

$ npm install axios
$ npm install --save-dev tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Tailwind関連

tailwind.config.cjs

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}

index.css

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

随時更新