2023-05-19

Nuxt3系プロジェクトセットアップ手順

Nuxt3系プロジェクト作成

TypeScript+Nuxt3(Vue3系) eslist+prettier含むプロジェクトの作成手順

プロジェクト作成

npx nuxi@latest init my-nuxt3-project
cd my-nuxt3-project
npm install

※ Vite4 系が出たことにより Nuxt のマイナーバージョンが上がっている。Vite4 系だと依存関係に typescript @types/node が含まれていない為、追加する必要がある。

npm install -D typescript @types/node

ローカル実行

npm run dev

eslint Prettier の導入

eslint 導入

npx eslint --init

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

@nuxtjs/eslint-config-typescript も追加

npm install -D @nuxtjs/eslint-config-typescript

prettier 導入

npm install -D prettier eslint-config-prettier @vue/eslint-config-prettier

.prettierrc 作成

{
  "singleQuote": true,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "trailingComma": "none"
}

.eslintrc.js を修正

module.exports = {
  env: {
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended', // 削除(@nuxtjs/eslint-config-typescript で適用済み)
    '@nuxtjs/eslint-config-typescript', // 追加
    'plugin:@typescript-eslint/recommended', // 削除
    'prettier', // 追加
    '@vue/prettier', // 追加
  ],
  overrides: [],
  parser: '@typescript-eslint/parser', // 削除(@nuxtjs/eslint-config-typescript で適用済み)
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
};

package.json の scripts 下記を追記

"lint": "eslint \"./**/*.ts\" --ignore-path .gitignore . && prettier --write \"**/*.ts\" --ignore-path .gitignore"

husky 導入

コミット時に自動的に eslint の解析と prettier の整形を実行させる

npm install -D husky lint-staged
npx husky-init

package.json に下記を追記

  --- 中略 ---
  "lint-staged": {
    "*.{ts}": [
      "eslint --fix --ext \".ts\" --ignore-path .gitignore .",
      "prettier --write \"**/*.ts\" --ignore-path .gitignore"
    ]
  }

.husky/pre-commit ファイル修正

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx test # 削除
npx lint-staged # 追加

2020-12-09

AWSのクロスアカウントの権限回りはややこしい

技術雑記

おはこんばんにちは。Shooneです。

AWSのクロスアカウントの扱いはなかなか難しいですね。。。

この前はS3回りでやられました。

別アカウントからアップされたものは所有者が異なる
そうすると、バケットポリシーの制御が効かない
CloudFrontでうまいこと公開できなかった

↑のケースでは、アップされる側のS3の設定で「誰からアップされても自分のモノにする」設定があったので、これをONにしてやることで解決。。。

今日はCodeBuildで別アカウントのCloudFormationの実行(実際にはCDKを使う)をするのに苦戦しました。

AssumeRoleを使えばいいと思うんだが、CloudFormationがネストしていて、テンプレートは自アカウントのS3に置かれるという状況。。。

またややこしい。明日整理しよう。

お疲れ様でした。

2020-12-08

ポモドーロのすすめ

テクニックハック

おはこんばんにちは。Shooneです。

今日はポモドーロ・テクニックについてご紹介します。

ポモドーロ・テクニックとは

ポモドーロ・テクニック（英: Pomodoro Technique）とは、時間管理術のひとつ。 
1980年代にイタリア人のフランチェスコ・シリロによって考案された。

このテクニックではタイマーを使用し、一般的には25分の作業と短い休息で作業時間と休息時間を分割する。
 1セットを「ポモドーロ」と呼ぶ。
これは、イタリア語で「トマト」を意味する言葉で、シリロが大学生時代にトマト型のキッチンタイマーを使用していたことにちなむ。

Wikipediaより引用

ポモドーロ・テクニックの手順

達成しようとするタスクを選ぶ
キッチンタイマーで25分を設定する
タイマーが鳴るまでタスクに集中する
少し休憩する（5分程度）
ステップ2～4を4回繰り返したら、少し長めに休憩する（15分～30分）

オススメのツール

Chrome拡張のマリナラ：Pomodoro® アシスタントというのを使っています。

必要十分な機能が備わっているを思います。

まとめ

自分は集中力が続くタイプではありません。。。しかしツールに従い作業することで作業興奮が生まれ、決まった時間に思いっきり休憩することで生産性が維持できている気がします。

ぜひお試しあれ。

Shooneの日記

0歳児の子持ちエンジニアの日常。1行でもいいので毎日書く。