eslint와prettier 설정

참고

 

Vue.js 개발 생산성을 높여주는 도구 3가지

 

.eslintrc.js

prettier 설정 내용까지 여기에 써줘서 eslint설정을 우선시해서 오류가 안남 (설정후 서버재가동)

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    'prettier/prettier': [
      'error',
      // 아래 규칙들은 개인 선호에 따라 prettier 문법 적용
      // https://prettier.io/docs/en/options.html
      {
        singleQuote: true,
        semi: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

 

vue.config.js 생성 

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

 

settings.json (ctrl+,)

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ],
    "editor.formatOnSave": false,
    "editor.formatOnType": true,
    "vetur.format.defaultFormatter.ts": "none",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    "workbench.startupEditor": "newUntitledFile",
    "eslint.validate": [
    
        {
            "language": "vue",
            "autoFix": true
          },
          {
            "language": "javascript",
            "autoFix": true
          },
          {
            "language": "javascriptreact",
            "autoFix": true
          },
          {
            "language": "typescript",
            "autoFix": true
          },
          {
            "language": "typescriptreact",
            "autoFix": true
          }
    ],
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Night Owl",
    "git.enableSmartCommit": true
}