Vue-cli에서 Eslint를 사용하여 자동 서식을 구현하는 방법

이 글에서는 vscode에서 코드를 자동으로 포맷하는 Vue-cli Eslint의 방법을 주로 소개하고 참고하겠습니다.

편집기의 또 다른 매우 중요한 기능은 코드 형식 지정입니다. VS Code는 기본적으로 .js, .html 등과 같은 일반 파일 형식을 제공합니다.

.vue 파일에 대한 형식 지원 추가

여기서 .vue 파일에 대한 형식 지원을 추가합니다.

1. Vetur 플러그인을 설치합니다.
2. VS Code 설정에 다음 규칙을 추가합니다.

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

다음은 Vetur에서 기본적으로 사용하는 서식 지정 플러그인입니다. 이러한 방식으로 .vue 파일의 html 및 javascript 코드에 대한 형식 지정 지원이 제공됩니다.

vue eslint 코드 자동 서식 지정

1. vue-cli 코드 스타일은 JavaScript 표준 스타일이므로 주의하지 않으면 eslint의 autoFixOnSave를 사용하여 자동으로 코드 서식을 지정할 수 있습니다. 저장할 때. 코드 스타일 사양

2. 
   

   텍스트 eslint 자동 서식 지정

구성 환경:

1. npm i -g eslint-plugin-vue
   #or
   npm i -S eslint-plugin-vue

경로 아래에 프로젝트와 파일을 만듭니다. .eslintrc

2. 
   

   //　添加插件
   "plugins": [
     "vue"
   ]

vscode 설정 파일에 추가하세요:

1. vscode2에 eslint 플러그인을 추가하세요. vscode

3에 vetur 플러그인을 추가하세요. 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue-cli에서 webpack 템플릿을 사용하여 프로젝트 구성 및 패키징 경로 문제 해결

vue의 버스 글로벌 이벤트 센터(자세한 튜토리얼)

Angular 변경 사항에 대한 자세한 해석 시리즈 감지 문제

위 내용은 Vue-cli에서 Eslint를 사용하여 자동 서식을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!