ESLint + Prettier 설정

1. ESLint 와 Prettier를 설치한다.

2. vue.config.js 파일을 root 아래에 생성
-> ESLint 에러가 화면에 표시되지 않게 된다.

module.exports = {
	devServer: {
		overlay: false,
    }
};

3. .eslintrc.js

...
rules: {
    "no-console": "off",
    "vue/no-use-v-if-with-v-for": "off",
    // "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: 90,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },

4. window 기준 ctrl + , 눌러서 설정 열고 eslint 검색

5. settings.json 편집

{
	"workbench.colorTheme": "Night Owl",
	"editor.multiCursorModifier": "ctrlCmd",
	"workbench.iconTheme": "material-icon-theme",
	"workbench.sideBar.location": "left",
	"editor.tabSize": 2,
	"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
	"eslint.workingDirectories": [
		{
			"mode": "auto"
		}
	],
	"eslint.validate": [

		{
			"language": "vue",
			"autoFix": true
		},
		{
			"language": "javascript",
			"autoFix": true
		},
		{
			"language": "javascriptreact",
			"autoFix": true
		},
		{
			"language": "typescript",
			"autoFix": true
		},
		{
			"language": "typescriptreact",
			"autoFix": true
		}
	],
	"eslint.alwaysShowStatus": true,
	"editor.insertSpaces": false,
	"editor.formatOnPaste": false,
	"editor.formatOnType": false,
	"editor.formatOnSave": false,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"git.ignoreWindowsGit27Warning": true,
	"eslint.codeAction.showDocumentation": {
	
		"enable": true
	},
		
}

6. ctrl + shift + p 누르고 ESLint fix all auto-fixable Problems 선택