eslint-disable not working

ESLint

ESLint는 자바스크립트 코드에서 문제를 검사하고 일관성 있는 코드 스타일을 유지할 수 있도록 도와주는 정적 코드 분석 도구입니다.

ESLint는 사용자가 직접 규칙을 만들거나 다른 사용자가 만든 규칙을 사용할 수 있는데 이 때문에 코드의 문법에 문제가 없어도 규칙을 어기면 에러가 뜹니다.

 

미리 작성된 template기반으로 동적으로 Vue 코드를 생성해주는 프로그램을 개발중에 띄어쓰기, 줄바꿈 같은 규칙까지 지키면서 만들 수가 없어서 eslint-disable을 사용했습니다.

 

Disable

vscode의 Quick Fix에서는 두가지 disable 옵션이 있습니다.

- Disable prettier/prettier for this line

에러 나는 코드 위에 해당 구문을 추가하는데 이는 한 줄 마다 추가 해야합니다.

// eslint-disable-next-line prettier/prettier

- Disable prettier/prettier for the entire file

파일 최상단에 해당코드를 추가합니다.

<!-- eslint-disable prettier/prettier -->

그런데 이 코드를 썼을 때는 template부분에만 적용되어 script코드에서는 계속에러가 납니다.

*prettier 부분은 생략해도 됩니다!!

 

Script 태그에서의 Disable

- JavaScript의 주석 형식을 사용

해당 코드에서는 <!-- --> 주석을 사용하고 있기 때문에, template 부분에서는 주석이 올바르게 작동할 수 있지만, script 부분에서는 작동하지 않을 것입니다. 이유는 이 주석은 HTML 주석이기 때문입니다.
따라서, script 부분에서 eslint-disable 주석을 사용하려면, JavaScript의 주석 형식을 사용해야 합니다.

// eslint-disable-next-line

위 주석을 script 태그 안쪽에 추가하면, 해당 script 태그 안의 모든 코드에 대해 ESLint 검사를 비활성화시킬 수 있습니다.

 

- eslint-disable 주석을 script 태그 바로 위에 추가

eslint-disable 주석을 script 태그 바로 위에 추가하면, script 태그 안의 모든 코드에 대해 ESLint 검사를 비활성화시킬 수 있습니다.

<!-- eslint-disable -->
<script>
  // your code here
</script>

 

최종 코드

<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    ${template}
  </div>
</template>

<!-- eslint-disable -->
<script>
import VueSimpleAlert from 'vue3-simple-alert';
${import}

export default {
  name: '${name}',
  components: {
    ${components}
  },
  setup() {
    ${setup}
  },
  data() {
    return {
      ${data}
    };
  },
  computed: {
    ${computed}
  },
  created() {},
  mounted() {
    ${mounted}
  },
  methods: {
    ${methods}
  }
};
</script>

<!-- eslint-disable -->
<style scoped>
${style}
</style>

 

*특정 디렉토리에 eslint를 적용하고 싶지 않을 때

.eslintignore 파일 작성

build/*
/src/assets/lib

 

*특정 rule(규칙)을 적용하고 싶지 않을 때

.eslintrc.json 작성

{
  "root": true,
  "env": {
    "node": true,
    "jquery": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "tabWidth": 2,
        "trailingComma": "none",
        "printWidth": 140,
        "bracketSpacing": true,
        "arrowParens": "avoid",
        "endOfLine": "auto" 
      }
    ],
    "no-unused-vars": "off",
    "no-import-assign": "off",
    "no-redeclare": "off",
    "no-undef": "off",
    "no-inner-declarations": "off",
    "no-case-declarations": "off",
    "no-prototype-builtins": "off",
    "no-useless-escape": "off",
    "no-debugger": "off"
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    // "prettier",
    "plugin:prettier/recommended"
  ]
}