VSCode에서 vue를 구성하고 Vetur 언어 인식 엔진을 사용하는 방법!

Vue를 VSCode에서 어떻게 구성하나요? Vue 구문을 식별하시겠습니까? 다음 기사에서는 Vetur를 언어 인식 엔진으로 사용하는 방법을 소개합니다. Vuers를 위한 최고의 VSCode를 만들어 보겠습니다.

공식 웹사이트에서 vscode를 다운로드한 후 설치가 열리고 프롬프트에 따라 설치하고 다시 시작하면 인터페이스가 중국어 인터페이스가 됩니다. [추천학습: "vscode tutorial"]

인터페이스 테마는 Materia 테마를 사용합니다. 인터페이스 스타일이 매우 깔끔하고 색상도 눈에 편합니다. ~Materia Theme，界面风格非常干净，颜色也比较护眼，写代码的时候心情也跟着清新起来~

图标显示使用Material Icon Theme，文件图标非常齐全，搭配Materia Theme非常好看

因为我使用的是vue技术栈，所以还要针对vue语法做识别，这里推荐按照Vetur作为语言识别引擎，提供语法识别，格式化，相关提示。

配置格式化

vetur自带格式化工具，使用的是prettier格式化方案，具体可以看配置，使用ctrl/command + ,打开设置

可以看到js的格式化引擎默认使用的是prettier

但是一般项目都是推荐使用eslint统一源码格式，所以还要对vuter进行eslint的适配

安装eslint和prettier扩展

按照eslint扩展提示，要正常使用eslint，还要全局按照eslint

npm install -g eslint

使用自定义配置进行格式化，以下是我的vscode自定义设置

{
  "workbench.iconTheme": "eq-material-theme-icons",
  "workbench.colorTheme": "Material Theme",
  "materialTheme.fixIconsRunning": false,
  "editor.fontSize": 16, // 字体大小
  // 以下是代码格式化配置
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "editor.tabSize": 2, // 代码缩进修改成2个空格
  "eslint.autoFixOnSave": false, // 每次保存的时候将代码按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
    }
  ]
}

每次进行保存的时候都会进行格式化，解放劳动力，效果如下

常用插件

• Auto Rename Tag 改标签名的时候，自动更改闭合标签名
• Bookmarks 书签插件，记录代码重点，review的时候更容易get对应的点
• Bracket Pair Colorizer 括号着色，对于多个嵌套的括号对应识别精准
• Change Case 代码变量声明时候，可以对已有变量切换成驼峰式，常量式，其他的风格
• Codelf 说起代码命名我就来气，他么的编程一半时间就是在想怎么命名更贴切，合适，有了这个神器，虽然说不能解决命名想破脑瓜子的难题，但是至少提供了建议，能更快解决，避免脑瓜子想破
• cssrem 一个CSS值转REM的VSCode插件

html字体我这边设计是使用14px，所以转的时候，对应关系应该是 1rem = 14px，所以要在用户设置里面进行配置

// 第三方插件cssrem配置
  "cssrem.rootFontSize": 14

• Vue Peek 右键打开或预览引用的组件
• filesize 计算源码文件大小，并显示在左下角
• GitLens git历史查看，提交记录查看，历史比较，版本回滚，神器不解析
• Import Cost 计算import引入的文件大小
• IntelliSense for CSS class names in HTML class根据工作空间中找到的定义或通过link元素引用的外部文件，为HTML 属性提供CSS类名称完成。

因为我们使用vue语言开发，所以还要针对vue进行一下css的提示配置

"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"

• Live Server 提供对HTML的即时服务预览，代码改动即时刷新

• Path Intellisense 路径引入智能感知

• npm-intellisense npm module 引入智能感知

• RegExp Preview and Editor 正则表达式预览和编辑

• Settings Sync 同步你的vscode设置，包括插件，主题一切用户数据

• SVG Viewer 预览SVG

• Todo Tree 显示你代码里面的TODO列表

• translate 翻译

• Tslint ts代码格式检测工具

• Version Lens npm version检测

• vscode-fileheader 生成文档注释头

• JavaScript (ES6) code snippets es代码片段

• Copy Relative Path

  Icon 디스플레이는 Material Icon Theme를 사용하고 파일 아이콘은 매우 완벽하며 Materia 테마

Vue 기술 스택을 사용하기 때문에 Vue 구문 식별도 필요합니다. 사용을 권장합니다. Vetur는 문법 인식, 서식 지정, 관련 팁을 제공하는 언어 인식 엔진입니다.

구성 형식

vetur는 자체 형식 도구와 함께 제공되며 prettier 형식 구성표를 사용합니다. 자세한 내용은 구성 및 ctrl/command + ,설정 열기를 사용하세요js 서식 지정 엔진은 기본적으로 prettier를 사용하는 것을 볼 수 있지만🎜🎜일반 프로젝트에서는 사용을 권장합니다. eslint code>는 소스 코드 형식을 통합하므로 <code>vuter를 eslint🎜

설치에 맞게 조정해야 합니다. eslint 및 prettier 확장

🎜eslint 확장 팁을 따르세요. eslint를 정상적으로 사용하려면 사용자 정의 구성을 사용하여 eslint🎜rrreee🎜에 따라 전역적으로 형식을 지정해야 합니다. 다음은 내 vscode 사용자 정의 설정🎜rrreee🎜입니다. 매번 수행합니다. 노동력을 확보하기 위해 저장할 때 포맷됩니다. 효과는 다음과 같습니다. />🎜

자주 사용하는 플러그인

• 태그 자동 이름 바꾸기 태그 이름 변경 시 자동으로 이름 변경 🎜
• 북마크 코드의 핵심 포인트를 기록하는 북마크 플러그인으로 검토 중에 해당 포인트를 더 쉽게 얻을 수 있습니다.🎜
• Bracket pair Colorizer 괄호 색상 지정, 여러 중첩 괄호의 정확한 식별🎜<li> <code>대소문자 변경 코드 변수 선언 시 기존 변수를 카멜 케이스, 상수 또는 기타 스타일로 전환할 수 있습니다🎜
• Codelf 코드 이름 지정에 대해 이야기하겠습니다. Angry는 프로그래밍 시간의 절반을 보다 적절하고 적절하게 이름을 지정하는 방법을 생각하는 데 소비합니다. 이 아티팩트는 이름 지정의 어려운 문제를 해결할 수는 없지만 최소한 제공합니다. 더 빠르게 해결하고 혼동되는 이름을 피하기 위한 제안입니다. Broken🎜
• cssrem CSS 값을 REM🎜🎜🎜html 글꼴로 변환하는 VSCode 플러그인입니다. 변환 시 해당 관계는 1rem = 14px이어야 하므로 사용자 설정의 구성에 있어야 합니다🎜rrreee
  • Vue Peek 참조된 구성 요소를 열거나 미리 보려면 마우스 오른쪽 버튼을 클릭하세요🎜
  • filesize 소스코드 파일 크기를 계산하여 왼쪽 하단에 표시 Angular🎜
  • GitLens git 기록 보기, 커밋 기록 보기, 기록 비교, 버전 롤백, 아티팩트 구문 분석되지 않았습니다🎜
  • 가져오기 비용 가져오기로 인한 파일 크기를 계산합니다. 🎜
  • HTML의 CSS 클래스 이름에 대한 IntelliSense 클래스는 HTML 속성에 대한 CSS 클래스 이름 완성 기능을 제공합니다. 작업공간에서 찾은 정의나 링크 요소를 통해 참조되는 외부 파일을 기반으로 합니다. 🎜🎜🎜개발에 Vue 언어를 사용하기 때문에 vue에 대한 CSS 프롬프트도 구성해야 합니다🎜rrreee
    • 🎜Live Server는 HTML의 즉각적인 서비스 미리보기를 제공하며 코드 변경도 즉각적입니다. 새로 고침 🎜🎜
    • 🎜Path Intellisense 경로에 지능형 감지 기능 도입 🎜🎜
    • 🎜npm-intellisense npm 모듈에 지능형 감지 기능 도입 🎜🎜
    • 🎜 RegExp 미리보기 및 편집기 정규식 미리보기 및 편집🎜🎜
    • 🎜설정 동기화 플러그인, 테마 및 모든 사용자 데이터를 포함한 vscode 설정 동기화🎜🎜
    • 🎜SVG 뷰어
SVG 미리보기🎜🎜
• 🎜Todo Tree 코드에 TODO 목록 표시🎜🎜
• 🎜번역 번역🎜🎜🎜Tslint ts 코드 형식 감지 도구🎜🎜
• 🎜버전 렌즈 npm 버전 감지🎜🎜
• 🎜vscode-fileheader 생성 문서 주석 헤더 🎜🎜
• 🎜JavaScript(ES6) 코드 조각 es 코드 조각 🎜🎜
• 🎜상대 경로 복사 상대 경로 복사 🎜🎜🎜🎜더 보기 더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 VSCode에서 vue를 구성하고 Vetur 언어 인식 엔진을 사용하는 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!