Vue 구문 오류 검사 기술을 소개하는 기사

Vue는 매우 인기 있는 프런트 엔드 프레임워크로 간단하고 유연하며 효율적이며 점점 더 많은 개발자에게 사랑을 받고 있습니다. 그러나 Vue 구문의 복잡성으로 인해 개발자는 사용 중에 필연적으로 구문 오류가 발생하며 이로 인해 응용 프로그램이 제대로 실행되지 않습니다. 이러한 상황이 발생하지 않도록 하기 위해 이 기사에서는 Vue 구문 오류 검사 기술을 소개합니다.

1. Vue-cli 설치

먼저 Vue-cli를 설치해야 합니다. Vue-cli를 사용하면 Vue 애플리케이션용 개발 환경을 빠르게 구축할 수 있습니다. 설치 명령은 다음과 같습니다:

npm install -g vue-cli

2. ESLint 사용

ESLint는 코드에서 문법 오류, 스타일 문제 등을 감지하는 데 도움이 되는 오픈 소스 JavaScript 구문 검사 도구입니다. . ESLint를 사용하여 Vue 코드를 검사하려면 먼저 ESLint 및 Vue 플러그인을 설치해야 합니다. T ESLINT 설치: ​​

1. NPM I -D ESLINT

Vue 플러그인 설치:

2. NPM I -D ESLINT -Plugin -Vue

.eslintrc.js 파일 생성: 디렉터리, .eslintrc 생성. js 파일을 만들고 다음 구성 코드를 파일에 복사합니다.

module.exports = {
3. root: true,
env: {

node: true

},

확장: [

'plugin:vue/essential',
'@vue/standard'

] ,
parserOptions: {

parser: 'babel-eslint'

} ,
규칙: {

// 这里可以添加自己额外的规则

}
}

위 구성 지침:

• 루트: 파일이 루트 구성 파일임을 나타내려면 true로 설정하고 ESLint는 상위 파일 구성에서 검색을 중지합니다.

• env: 코드가 실행되는 환경을 지정합니다. 여기서는 node.js 환경에서 실행된다는 의미입니다.

• 확장: 상속된 ESLint 규칙 구성, 두 가지 규칙 구성, 플러그인:vue/essential 및 @vue/standard가 여기에서 사용됩니다.

• 파서 옵션: 파서 옵션을 지정합니다. babel-eslint는 Babel 파서를 사용하는 파서 래퍼입니다.

• 규칙: 자신만의 ESLint 규칙을 추가할 수 있습니다.

VS Code 확장 설치

자동으로 오류를 확인하고 코드 편집기에서 오류 메시지를 표시하려면 VS Code에 ESLint 확장을 설치해야 합니다.

3. 코드 확인
4. 위 단계를 완료하면 코드 확인을 시작할 수 있습니다. VS Code에서 Vue 프로젝트를 열면 ESLint 확장이 자동으로 프로젝트의 오류를 감지하고 오류 메시지를 표시합니다.

이 시점에서 VS Code에서 Vue 컴포넌트를 열면 아래 그림과 같은 오류 메시지를 볼 수 있습니다.

위 그림과 같이 코드 창 왼쪽에 작은 빨간색 점이 나타나는데, 그 위로 마우스를 이동하면 오류 메시지에 따라 코드를 수정할 수 있습니다.

또한 특정 줄의 오류 검사를 무시하려면 해당 줄 끝에 주석을 추가할 수 있습니다. 주석 내용은 // eslint-disable-line: