Zenn
Open7

Nuxt3プロジェクトの初期設定

Nuxt
Nuxt
しゃもじしゃもじ

eslintのインストール

特にこだわりはないので下記を参考に実装する。
https://miyauchi.dev/posts/vite-vue3-typescript/

yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
.eslintrc
{
  "root": true,
  "env": {
      "browser": true,
      "es2021": true,
      "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
      "ecmaVersion": 2021
  },
  "plugins": [
  ],
  "rules": {
  }
src/shim-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<Record<string,unknown>, Record<string,unknown>, unknown>
  export default component
}

eslintがしやすいようにscriptを作る

package.json
"scripts": {
  "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore ."
}

これでscriptを実行したら下記エラーがでる。

Oops! Something went wrong! :(

ESLint: 8.22.0

Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc » @vue/eslint-config-typescript/recommended » <UserPath>/node_modules/@vue/eslint-config-typescript/index.js': Cannot find module 'typescript'

調査中

しゃもじしゃもじ

prettierのインストール

yarn add -D prettier

prettierの設定

.prettierrc
{
  "printWidth": 30,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf"
}