2021.05.24

2021.05.24
ブランチ:project-setting
🎉 TIL
1.プロジェクトの作成&vue-cli

#shell
npm install -g @vue/cli
vue create vue-flix

2.ESLintオーバーライド層属性の無効化
:Web Pack DevServer上書きプロパティをfalseに変更します.

// vue.config.js
module.exports = {
    devServer: {
        overlay: false,
    },
};

3.ESLint設定ファイルに次のように早く配置する理由
PrettierプロパティとESLintプロパティの間で競合が発生する可能性があり、ESLintの設定を優先します.

リファレンス

Vue.3種類のjs開発効率を向上させるツール

// .eslintrc.js
rules: {
	"prettier/prettier": [
		"error",
		{
			singleQuote: true,
			semi: true,
			useTabs: true,
			tabWidth: 4,
			trailingComma: "all",
			printWidth: 80,
			bracketSpacing: true,
			arrowParens: "avoid",

			// Delete `␍` eslint (prettier/prettier)에러 발생할 경우 추가
			endOfLine: "auto",
		},
	],
}

4.ESLintとPrettierの設定ファイルを変更したが、自動的に変更できない場合は、この問題を解決してください.

Vscodeプロファイルで「ESLint」、「ESLint」の設定を検索します.jsonファイルのvalidateプロパティに次のソースを追加します.
: ソースリンク

{
  // ESLint
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // don't format on save
  "editor.formatOnSave": false
}

Vscode Prettier Extensionは、現在のタスクで「無効」に設定されています(設定ファイルに適用されるフォーマットを使用するesLint).

Vscode設定の無効化>フォーマットの保存(Save Format)(フォーマットの競合を防止)

5. ファイルの絶対パスの設定
「jsconfig」は、

プロジェクトフォルダのルートディレクトリにあります.json"ファイルを生成し、次の内容を入力します.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

6. プロジェクトコード会議
7. Netlifyによる自動導入
8. vue-3を参照
9.Vue 3バージョンで生成されたプロジェクトは、既存のdevtoolsではなく最適バージョンdevtoolsを使用します.