ESLint 관련

vue js eslint-loader autofix 설정 (vue-cli로 만든 프로젝트에서 webpack 설정하는법)

vscode에서 save할때마다 eslint, prettier autofix가 되는데 vue js에서는 waring error가 났다.

vscode setting에서 editor.formatOnSave: true 설정을 해줘도 error가 계속 났다.

eslint-loader에서 에러가 나는 것을 보고 내장된 webpack loader에 eslint-loader가 있는 것으로 생각되어서 검색을 해보니, vue.config.js에서 loader 설정을 바꿔줄수 있었다.

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
          .rule('eslint')
          .use('eslint-loader')
          .loader('eslint-loader')
          .tap(options => {
              options.fix = true
              return options
          })
      }
}

다음과 같이 autofix를 해주는 옵션을 적용하니 error가 더이상 안뜨게 되었다.

reference

• https://medium.com/@kozyreva.hanna/vue-project-with-vue-cli3-eslint-prettier-in-vs-code-1e59d686eb93
• https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
• https://stegriff.co.uk/upblog/how-to-change-webpack-settings-set-by-vue-cli/

cannot find module 'eslint-plugin-vue' 에러 해결

.vscode/setting.json에

"eslint.workingDirectories": [
    ['./client','./server']
  ]

를 추가해주면 해결된다.

root/
  client/
    .eslintrc.js
  server/
    .eslintrc.js

현재 폴더구조가 위와같고 working directory가 root라서 발생한 에러 같다.

['./client','./server'] 옵션을 주면 working directory가 client내에서는 client로 server 내에서는 server로 바뀌어서 각각에 맞는 lint가 적용된다.

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Delete ␍ eslint (prettier/prettier) 해결방법

CRLF 관련 문제.

eslint rules에 다음 문구를 추가해주면 된다.

    rules: {
        'prettier/prettier': [
            'error',
            {
                endOfLine: 'auto',
            },
        ],
    },

• https://noogoonaa.tistory.com/62