vscode+vue에 구성을 추가하는 방법

vscode+vue에 구성을 추가하는 방법은 무엇입니까?

vscode+vue에서 사용해야 하는 플러그인과 추가해야 할 구성

우선 불평하자면, vscode를 처음 사용하는 것이 없습니다(물론 실제로는 몇 가지 있습니다. , 하지만 사용자가 구성해야 합니다.) 설치나 초기화 중에 함께 설치할 수 없습니다. Baidu에 가서 하나씩 플러그인을 찾아야 합니다. . .

추천 관련 튜토리얼: vscode 튜토리얼

불만은 불만입니다. Google과 Baidu를 사용할 수 있다면 당신은 마스터입니다.

파일 자동 저장 설정

vscode의 장점 중 하나는 자동 컴파일입니다. 페이지를 새로 고칠 필요는 없지만 문서가 저장되기에는 너무 게으른 경우 "Ctrl+"를 눌러야 합니다. S" 편집이 완료된 후 설정하시면 문서가 자동으로 저장됩니다.

파일-> 자동 저장

위의 내용은 vscode 설정에 있습니다. 경로는

기본 설정-> 오른쪽 상단 모서리를 클릭할 수도 있습니다. "{}" 아이콘을 클릭하면 JSON 편집 창이 열립니다. 여기에서 자동 저장 시간을 설정할 수도 있습니다.

Html 태그 자동 완성

기존에는 다른 편집기(HBuilder, WS, VS 등)를 사용하여 html 코드를 작성할 때 html 태그의 앞부분을 입력하면 뒷부분이 자동으로 완성되지만, vscode에서는 작동하지 않습니다. 매우 불편합니다.

vscode로 설치되는 확장 프로그램 중 Emmet의 주요 기능 중 하나는 수동으로 설정해야 하는 코드를 완성하는 것입니다.

설정(두 설정 공간 모두 구성해야 함)에서 다음 구성 코드를 추가하면 됩니다:

{
"emmet.triggerExpansionOnTab": true,
"files.associations": {
"*.js": "html",
"*.vue": "html"
}
}

하이라이팅, 구문 플러그인

평소 작성하는 코드에서 오류가 자주 발생하지만 그렇지 않습니다. 아래 그림과 같이 어디에서 잘못되었는지, 수정하는 방법 등을 알 수 있습니다.

이런 종류의 오류가 발생하면 다음 플러그인을 사용하여 도움을 받을 수 있습니다. 코딩, Vetur, ESLint 및 Prettier 플러그인, 이 세 가지 플러그인을 설치한 후 다음과 같이 구성합니다:

"editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint
  "editor.formatOnSave": true, //保存时自动格式化
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

이렇게 하면 vscode를 사용하여 vue를 작성하는 것이 조금 더 쉽습니다.

전체 구성은 아래에 게시되어 있습니다:

{
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay", //自动保存
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint
  "editor.formatOnSave": true, //保存时自动格式化
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "emmet.triggerExpansionOnTab": true,
  "files.associations": { //要进行html补全的文件
    "*.js": "html",
    "*.vue": "html"
  }
}

위 내용은 vscode+vue에 구성을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!