ESLint์™€ Prettier ์„ค์ • ํ•˜๊ธฐ

ํŒ€ ํ”„๋กœ์ ํŠธ์—์„œ ๋ทฐ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์ฝ”๋“œ๋ฅผ ์ผ๊ด€์ ์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ์—๋Ÿฌ๋ฅผ ๋œ ๋‚˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ESLint + Prettier ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ธ๋ฐ์š”. ์ด 2๊ฐœ ๋„๊ตฌ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…๊ณผ ์„ค์ • ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ ๊ธ€์„ ์ฐธ๊ณ ํ•ฉ๋‹ˆ๋‹ค.

ESLint์— Vue.js ๊ณต์‹ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

์œ„ ๋ธ”๋กœ๊ทธ ๊ธ€์—์„œ ์•ˆ๋‚ด๋œ ๊ฒƒ ์ด์™ธ์—๋„ Vue.js ๊ณต์‹ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๋ฅผ ESLint ๋ฃฐ์— ์ ์šฉํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋จผ์ € ๋ทฐ ํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ๋Š” .eslintrc ํŒŒ์ผ์˜ extends๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.




ย 


ย 
ย 
ย 



module.exports = {
  // ...
  extends: [
		// 'plugin:vue/essential',
		'@vue/prettier',
		'@vue/typescript',
		'plugin:import/errors',
		'plugin:import/warnings',
		'plugin:vue/recommended',
	],
}

๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ ๊ฐ™์€ ํŒŒ์ผ์˜ rules ์†์„ฑ์— ์•„๋ž˜์˜ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

module.exports = {
  rules: {
    /**********************/
    /* General Code Rules */
    /**********************/

    // Enforce import order
    'import/order': 'error',

    // Imports should come first
    'import/first': 'error',

    // Other import rules
    'import/no-mutable-exports': 'error',

    // Allow unresolved imports
    'import/no-unresolved': 'off',

    // Allow async-await
    'generator-star-spacing': 'off',

    // Prefer const over let
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],

    // No single if in an "else" block
    'no-lonely-if': 'error',

    // Force curly braces for control flow,
    // including if blocks with a single statement
    curly: ['error', 'all'],

    // No async function without await
    'require-await': 'error',

    // Force dot notation when possible
    'dot-notation': 'error',

    'no-var': 'error',

    // Force object shorthand where possible
    'object-shorthand': 'error',

    // No useless destructuring/importing/exporting renames
    'no-useless-rename': 'error',

    /**********************/
    /*     Vue Rules      */
    /**********************/

    // Disable template errors regarding invalid end tags
    'vue/no-parsing-error': [
      'error',
      {
        'x-invalid-end-tag': false,
      },
    ],

    // Maximum 5 attributes per line instead of one
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 5,
      },
    ],

    /***************************/
    /* ESLint Vue Plugin Rules */
    /***************************/
    'vue/html-indent': [
      'error',
      'tab',
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: [],
      },
    ],

    'vue/order-in-components': [
      'error',
      {
        order: [
          'el',
          'name',
          'parent',
          'functional',
          ['delimiters', 'comments'],
          ['components', 'directives', 'filters'],
          'extends',
          'mixins',
          'inheritAttrs',
          'model',
          ['props', 'propsData'],
          'fetch',
          'asyncData',
          'data',
          'computed',
          'watch',
          'LIFECYCLE_HOOKS',
          'methods',
          'head',
          ['template', 'render'],
          'renderError',
        ],
      },
    ],

    'vue/html-self-closing': ['off'],

    // https://eslint.vuejs.org/rules/attributes-order.html
    // TODO: ํŒ€ ๋‚ด ๊ธฐ์ค€์œผ๋กœ ์žฌ์กฐ์ • ํ•„์š”
    'vue/attributes-order': [
      'error',
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          'UNIQUE',
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
      },
    ],
  },
}

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•œ ESLint์˜ ๊ทœ์น™์ด ํ”„๋กœ์ ํŠธ์— ์ ์šฉ๋˜๋ ค๋ฉด ๋ทฐ ํ”„๋กœ์ ํŠธ์— ์•„๋ž˜์™€ ๊ฐ™์ด ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์„ค์น˜๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

{
  "eslint-config-standard": "^14.1.0",
  "eslint-plugin-import": "^2.18.2",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-standard": "^4.0.1",
}

์ฐธ๊ณ  ์ž๋ฃŒ