Vue eslint 등 [패스트캠퍼스 챌린지 27일차]

file-loader 이용, 이미지 가져오기

src 안에 assets 폴더 생성하고 그 안에 logo.png 파일 넣음

패키지 설치

npm i -D file-loader

webpack.config.json 세팅

module rules에

{
  test: /\.(png|jpe?g|gif|webp)$/,
  use: 'file-loader'
}

module.exports에 경로별칭(Alias) 추가

• 속성에는 특수한 기호를 사용할 수 없으니 문자데이터로 만들어서 속성의 키값으로 사용 '~' : 틸드

• 경로 별칭

  : 말 그대로 경로를 별칭으로 만들어서 사용하겠다는 거임
  원래 특정 이미지를 찾을 때 ./나 ../ 상대 경로 많이 이용했잖아.

  그런데 경로별칭을 사용하게 되면, 해당하는 경로 별칭이 지칭하는 실제 경로로 바로 점프해서 파일을 찾을 수 있음

• 실제 경로를 webpack.config.js에 명시해 줘야 함
  path 이용

module.exports = {
  resolve: {
    // 경로에서 확장자 생략 설정
    extensions: ['.js', '.vue'],
    // 경로 별칭 설정
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },
}

App.vue에 컴포넌츠 폴더 안의 다른 .vue 연결하기

App.vue에 추가

import

• ~ 틸드라는 경로 별칭 여기 사용했찌
• 우리 vue 확장자 생략 가능하지

<script>
import HelloWorld from '~/components/HelloWorld' 

export default

export default {
  components: {
    HelloWorld
  },

<template>

헬로월드를 빈 태그처럼 실행

<template>
    <HelloWorld />
</template>

---

ESLint 구성

패키지 설치

npm i -D eslint eslint-plugin-vue babel-eslint

세팅

루트 경로에 .eslintrc.js 파일 생성

.eslintrc.js 구성 옵션 추가

내보내기

• 네 가지 옵션 추가

module.exports = {
  env : {},
  extends: {},
  parserOptions: {},
  rules: {}
}

• 상세 내용

env

기본적으로 JS는 브라우저 환경 그리고 Node.js 환경에서 동작하잖아

그래서 eslint를 통해서 코드 검사를 브라우저 환경에서 동작하는 여러가지 전역 개념들,

그리고 Node.js 환경에서 동작하는 여러 전역 개념들을

모두 코드 검사를 할 것인지에 대해 설정하는 거임

env : {
    browser: true,
    node: true
  },

extends

eslint를 통해서 코드 검사를 할 기본적인 규칙들을 명시

Vue와 JS, 이 두 가지에 대한 코드 규칙 명시해주자

구글링 vue3 eslint : 여러 규칙 확인해볼 수 있지& 입맛에 맞게 수정하는 법도 있음

Available rules | eslint-plugin-vue

구글링 eslint rules: 권장되는 규칙들일 뿐, 입맛에 맞게 수정해서 사용 가능

List of available rules

Vue: 크게 세 가지

1. essential
2. strongly-recommended 선생님 픽
3. recommended 가장 엄격

JS: eslint에서 권장하는 기본적인 코드 규칙에 의해 JS 문법을 검사하겠다

extends: [
    // vue
    // 'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended', 
    // 'plugin:vue/vue3-recommended',
    // js
    'eslint:recommended'
  ],

parserOptions

기본적인 코드를 분석할 수 있는 분석기를 지정

babel이 ES6 이상의 문법을 구버전으로 변경시켜주잖아

eslint로 JS 코드 검사를 할 때 이 바벨의 도움을 받을 거임

parserOptions: {
    parser: 'babel-eslint'
  },

전체 내용

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: [
    // vue
    // 'plugin:vue/vue3-essential',
    "plugin:vue/vue3-strongly-recommended",
    // 'plugin:vue/vue3-recommended',
    // js
    "eslint:recommended",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {} // 얘는 아래에서 따로
}

rules

만약에 extends 부분에서 선택한 옵션의 코드의 규칙들을 그대로 사용할 거라면, rules에 옵션 적을 거 없음

그런데

만약 규칙을 변경해서 사용하고 싶다면, rules에 규칙 추가해줘야 함

혼자 개발하면 노상관이겠지만, 여러 사람과 협업할 때는 이거 꼭 알고 있어야 함

// 선생님 입맛
rules: {
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }

(참고)

전에 만든 이 빈태그 있잖아요

그건 rules vue/html-self-closing에서 component에 해당하는 거임

eslint 규칙에 맞게 자동 수정

eslint 규칙과 맞지 않아 에러난 거 있는 채로 저장했을 때,
Scode 에디터의 기능을 이용해서, 내가 정한 eslint 규칙에 맞게 에러 난 부분이 자동 수정될 수 있게 만들어보자

1. 모든 명령 표시 : (mac) CMD shift p

2. 기본 설정: 설정 열기 (JSON)

3. 옵션 추가

   'VScode에서 파일을 저장하게 되면. 저장된 파일의 소스 코드를 eslint 규칙에 맞게 수정하겠다'

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true 
    }

---

사실... 내 에디터에서 eslint 제대로 작동 안함 ㅠㅠ
어디서부터 잘못된 걸까
어디서부터 잘못한 걸까
엉엉
내일의 내가 해결해주길

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online