Vue js 3と爆速コンパイラviteでフロント開発する話です。

 npm install -g @vue/cli

以下はnpmを使いたい人は適宜置き換えてください。

yarn create vite-app {プロジェクト名}
cd {プロジェクト名}
yarn

vite-appの部分は固定です。createコマンドが参照するリポジトリを設定するそうです。

上記で導入は完了です。

yarn dev

でwebが起動します。驚くほど早いです。
表示されるように http://localhost:3000 にアクセスするとvuejsのデモページが表示されると思います。
すぐにでもこのまま開発に入れます。

sassも利用できるようにします。

yarn add -D sass

settings.jsonというファイルを作って設定を置きます。

{
  "vetur.validation.template": false,
  "eslint.validate": ["javascript", "javascriptreact", "vue"]
}

整形周りのツールをインストールします。

 yarn add -D eslint prettier eslint-config-prettier eslint-plugin-vue@next

設定ファイルを作ります。このへんは好みで選択します。

yarn eslint --init

そしたら.eslintrc.{選んだ拡張子}
でファイルができると思います。

以下はjsを選んだものとして書きます。
サンプルです。適宜変更してください。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        //"eslint:recommended",
        //"plugin:vue/essential"
        "plugin:vue/vue3-recommended",
        "prettier",
        "prettier/vue"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
      "indent": ["error", 2]
    }
};

package.jsonのscriptsに

  "scripts": {
    "dev": "vite",
    "lint": "eslint .",
    "build": "vite build"
  },

のように追加

これでyarn lintと打つとチェックが走ります。
–fixオプションもつければ警告程度なら勝手に補正してくれます。