vue3+vite 프로젝트 구성 ESlint, 프린터 플러그인

ESlint 및 프린터 플러그인 구성

Vue 3 + Vite 프로젝트에서 다음 단계를 통해 ESLint 및 Prettier 플러그인을 구성할 수 있습니다.

플러그인 설치:
프로젝트 루트 디렉토리에서 터미널을 열고 다음 명령을 실행하여 ESLint 및 Prettier 플러그인을 설치합니다.
```
npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
```
위의 명령은 ESLint, Prettier 및 관련 플러그인과 구성을 설치합니다.
.eslintrc.js파일 만들기 :
프로젝트 루트 디렉터리에 이름이 지정된 파일을 만들고 .eslintrc.js다음 콘텐츠를 추가합니다.
```
module.exports = {
      
      
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
      
      
    'prettier/prettier': 'error'
  }
};
```
위의 구성에서는 plugin:vue/vue3-recommended확장을 사용하여 Vue 3에서 권장하는 규칙을 기반으로 ESLint를 구성했습니다. 또한 Prettier의 서식 지정 규칙을 지원하기 위한 확장 기능을 prettier도입 했습니다 . prettier/vue마지막으로 prettier/prettier코드가 Prettier 형식을 준수하도록 규칙을 오류 수준으로 설정하여 구성했습니다.
.prettierrc.js파일 만들기 :
프로젝트 루트 디렉터리에 이름이 지정된 파일을 만들고 .prettierrc.js다음 콘텐츠를 추가합니다.
```
module.exports = {
      
      
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2
};
```
위의 구성에서 semi(세미콜론 사용 여부), singleQuote(작은 따옴표 사용 여부), ( trailingComma후행 쉼표 사용 여부), printWidth(줄의 최대 길이) 및 tabWidth(들여쓰기를 위한 공백 수)와 같은 몇 가지 일반적인 Prettier 구성을 사용했습니다. ) .
VS Code 편집기 구성:
VS Code 편집기를 사용하는 경우 다음 단계를 통해 저장 시 자동 서식 지정 및 코드 표준 확인을 구성할 수 있습니다.
- 확장 저장소에 다음 플러그인을 설치합니다: ESLint, Prettier - Code formatter
- VS Code의 설정( Preferences → Settings)을 열고 다음 설정 항목을 검색하고 편집합니다.
```
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
        
        
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
        
        
    "language": "vue",
    "autoFix": true
  }
]
```
위의 설정은 Vue 파일의 저장 및 ESLint에서 코드 서식을 활성화합니다.
코드 검사 및 서식 실행:
터미널에서 다음 명령을 실행하여 코드를 검사하고 서식을 지정합니다.
```
npx eslint .
npm run lint --fix
```
위의 명령을 사용하여 프로젝트의 코드 사양을 확인하고 몇 가지 간단한 문제를 수정하십시오.

위의 단계를 통해 Vue 3 + Vite 프로젝트에서 ESLint 및 Prettier 플러그인을 구성하고 이를 사용하여 코드 품질 및 스타일 일관성을 유지할 수 있습니다.

사용 시나리오 및 장단점

ESLint와 Prettier 플러그인을 사용하면 다음과 같은 시나리오와 장단점이 있습니다.

사용할 장면:

통합 코드 스타일: ESLint 및 Prettier는 일관된 코드 스타일 사양을 적용하고 팀원이 작성한 코드가 일관된 스타일을 갖도록 하며 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다.
잠재적인 문제 감지: ESLint는 선언되지 않은 변수, 사용되지 않는 변수, 불필요한 코드 등과 같은 코드의 잠재적인 문제 및 오류를 감지하여 개발자가 개발 프로세스 중에 이러한 문제를 찾고 수정할 수 있도록 도와줍니다.
자동 서식 지정: Prettier는 코드가 일관된 들여쓰기, 줄 바꿈, 따옴표 등을 유지하도록 코드 서식을 자동으로 지정하여 코드 서식을 수동으로 조정하는 시간과 작업량을 줄입니다.

이점:

일관된 코드 스타일: 통합 ESLint 및 Prettier 규칙을 구성하여 팀원이 작성한 코드가 일관된 스타일을 갖도록 하고 코드의 가독성과 유지 관리성을 향상시킬 수 있습니다.
코드 품질 향상: ESLint는 코드의 잠재적인 문제와 오류를 감지하고 개발자가 개발 프로세스 중에 이러한 문제를 찾아 수정하도록 돕고 코드 품질을 향상시킬 수 있습니다.
자동 서식 지정: Prettier는 코드가 일관된 들여쓰기, 줄 바꿈, 따옴표 등을 유지하도록 코드 서식을 자동으로 지정하여 코드 서식을 수동으로 조정하는 시간과 작업량을 줄입니다.

결점:

구성 복잡성: ESLint 및 Prettier 구성은 특히 플러그인의 규칙 및 구성 옵션을 이해해야 하는 초보 개발자의 경우 시간과 학습 비용이 소요될 수 있습니다.
유연성 감소: 특정 규칙 및 서식 옵션은 개인 또는 팀의 기본 설정과 일치하지 않을 수 있으므로 규칙 및 옵션을 조정하고 사용자 지정하는 데 추가 시간과 노력이 필요할 수 있습니다.
추가 오버헤드: 코드를 확인하고 형식을 지정하기 위해 코드를 저장하거나 빌드할 때마다 ESLint 및 Prettier를 실행해야 하므로 특히 대규모 프로젝트에서 약간의 오버헤드가 추가될 수 있습니다.

요약하면 ESLint 및 Prettier 플러그인은 코드 스타일을 통합하고 코드 품질 및 자동 서식을 개선하는 데 중요한 역할을 하지만 추가 오버헤드뿐만 아니라 구성 복잡성과 유연성을 평가해야 합니다. 대부분의 경우 프로젝트 유지 관리 및 팀 협업에 매우 유용합니다.

Vite 팩 및 분할 js 및 css

패키징에 Vite를 사용하는 경우 생성된 JavaScript 및 CSS 파일을 구성을 통해 분할할 수 있습니다. 일반적으로 사용되는 몇 가지 구성 옵션은 다음과 같습니다.

JavaScript 파일 분할: 파일
에서 구성 항목을 vite.config.js사용하여 JavaScript 파일의 분할 방법을 지정할 수 있습니다 . rollupOptions예를 들어, 분할할 청크는 output옵션의 속성을 사용하여 수동으로 지정할 수 있습니다.manualChunks
```
export default {
      
      
  rollupOptions: {
      
      
    output: {
      
      
      manualChunks: {
      
      
        vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
        utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
      }
    }
  }
}
```
위의 구성에서 두 개의 분할 블록을 지정했고 , vendor. 블록에는 Vue 및 Axios가 포함되고 블록에는 lodash로 시작하는 모듈이 포함됩니다.utilsvendorutils
CSS 파일 분할:
기본적으로 Vite는 모든 CSS 파일을 하나의 파일로 묶습니다. CSS 파일을 분할해야 하는 경우 extractCSS구성 항목을 사용하여 분할을 활성화할 수 있습니다.
```
export default {
      
      
  build: {
      
      
    cssCodeSplit: true
  }
}
```
위의 구성을 사용한 후 Vite는 각 항목 파일의 CSS를 별도의 파일로 추출합니다.

자바스크립트와 CSS 파일을 분할하면 추가 네트워크 요청이 증가할 수 있으므로 분할 시 로딩 성능과 파일 양의 균형을 맞춰야 한다는 점에 유의해야 한다. 실제 상황에 따라 모듈의 종속성과 코드 크기에 따라 합리적인 분할 구성을 수행할 수 있습니다.