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

7065 ワード
テキストリンク

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

前提

  • 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 master

開発環境を整えるまで

フォーマッタを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;

随時更新

Flutter for Web:Cookie操作をdartで行う方法
git pushでdenied parmissionエラー