vue.js vscode eslint&prettyer設定

vue cliライブラリをインストールした後、npxでプロジェクトを作成します.

npm i @vue/cli 
npx vue create demo

次のように設定します.

設定が完了したら、プロジェクトの設定を行います.

インストールが正常に行われていることを示す画面が表示されます.

vscodeでパスを開きます.eslintrc.jsファイルが作成されていることがわかります.

ファイルのプリファレンスは次のようになります.

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

ここにきれいなtierルールを追加

//.eslintrc.js
module.exports = {
	root: true,
	env: {
		node: true,
	},
	extends: [
		'plugin:vue/essential',
		'eslint:recommended',
		'plugin:prettier/recommended',
	],
	parserOptions: {
		parser: '@babel/eslint-parser',
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
	},
};

vscode拡張タブに移動し、ESlintとPrettierをインストールします.


cntl+を押してeslint:validateを検索します.

settings.jsonでeditをクリックし、次のコードを追加します.

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

完了したら、変速定周波数を再起動すればいい!