vscode에서 eslint와 prettier를 사용하는 방법에 대한 간략한 분석

vscode에서 eslint와 prettier를 어떻게 사용하나요? 다음 글에서는 vscode에서의 eslint 사용법과 eslint와 prettier의 결합 사용법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

1. vscode에서 eslint 사용

1) 먼저 vscode에 eslint를 설치한 후, vscode의 settings.json에 다음 코드를 추가하세요

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2) eslint는 프로젝트에 설치해야 합니다(또는 전역적으로 설치해야 합니다). )

vscode의 eslint 플러그인에 대한 요구 사항은 다음과 같습니다. [권장 학습: "vscode 입문 튜토리얼"]

3) 루트 디렉터리에 .eslintrc.js 파일을 추가하고 다음을 추가합니다. code

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4) 규칙 내부

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']

• 의 설정 속성 값 배열의 첫 번째 요소가 설정됩니다

• 속성 값 배열의 두 번째 요소가 설정됩니다

eslint.bootcss .com/docs/rules/ 해당 속성을 찾아 Enter를 클릭하고 옵션을 찾으세요.

• eslint:recommended. 기본 규칙은

으로 표시됩니다. 참고: 이때 프로젝트는 다음과 같이 표시됩니다. 기본 설정과 규칙의 규칙을 적용하고, 저장할 때 eslint에 따라 메시지를 표시할 수도 있습니다.

2. eslint를 prettier

와 함께 사용하세요. (참고: eslint와 prettier의 조합은 상황에 따라 다르며 반드시 prettier와 함께 사용할 필요는 없습니다.)

1) 먼저 vscode에 prettier 플러그인을 설치하세요. , 그리고 vscode의 설정으로 이동합니다. .json

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

에 다음 코드를 추가합니다

2) 프로젝트에 prettier를 설치합니다

eslint-plugin-prettier도 설치해야 합니다. code>eslint-config-prettier, 이 두 플러그인의 목적은 eslint가 prettier 규칙에 따라 메시지를 표시할 수 있도록 하는 것입니다(이 두 플러그인의 버전 번호, 최신 eslint-plugin- prettier 버전 4.0은 사용할 때 문제가 있습니다.) eslint-plugin-prettier、eslint-config-prettier，这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示（注意这两个插件的版本号问题，最新的 eslint-plugin-prettier 的4.0版本使用时有问题）

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

实际上做了下面的事情

然后就可以在根目录下添加.prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

그런 다음 .eslintrc.js의 확장과 plugin:prettier/recommended

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

실제로 다음 작업을 수행하세요

그런 다음 를 추가하면 됩니다. prettierrc.js 파일을 루트 디렉터리에 저장하면 eslint는 내부 규칙에 따라 메시지를 표시하고 저장할 때 규칙에 따라 형식도 지정됩니다

rules: {
//…
  'prettier/prettier': 'error'
}

3. vue 프로젝트에서 더 예쁜 규칙을 사용하세요

1) 먼저

생성 시 eslint + prettier 설정을 선택하세요. 2) 루트 디렉터리에 .prettierrc.js를 생성하고 규칙을 추가하세요.

rrreee

기본적으로 코드 형식이 올바르지 않으면 경고가 표시됩니다

필요한 경우 오류로 바꾸려면 .eslintrc.js에 다음 코드를 추가해야 합니다. rrreee효과는 다음과 같습니다

🎜참고: 🎜 일부 구성을 수정한 후 vscode가 작동하지 않을 수 있습니다. 즉시 적용되며 이때 닫을 수 있습니다. 프로젝트를 다시 열고 🎜🎜VSCode에 대한 자세한 내용을 보려면 🎜vscode 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 vscode에서 eslint와 prettier를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!