vscode에서 vue 파일 형식을 지정하는 방법에 대한 자세한 설명

이 글에서는 단축키를 사용자 정의하는 방법을 포함하여 vscode에서 vue 파일 형식을 지정하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue 파일 형식을 지정하려면 vscode의 beautify 플러그인을 사용하세요

1. 먼저 beautify 플러그인을 설치하세요

[추천 학습: "vscode 튜토리얼"]

2. 설정 열기 => beautify.언어 검색

3. json을 구성하세요

"beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    }

특정 용도(무시 가능, 구성 불가)

1. 디렉토리

 {
   "brace_style": "none,preserve-inline",
   "indent_size": 2,
   "indent_char": " ",
   "jslint_happy": true,
   "unformatted": [""],
   "css": {
     "indent_size": 2
   }
 }

파일 내용은 위와 같습니다. 일부 매개변수를 강조 표시해야 합니다.

• brace_style, 형식 스타일, 자세한 내용은 공식 설명을 참조하세요(eslint의 기본 검사와의 충돌을 피하기 위해 이 속성을 brace_style，格式风格，详见官方说明（为避免和eslint默认检查冲突，建议此属性设置为 none,preserve-inline）
• indent_size，缩进长度（为避免和eslint默认检查冲突，建议此属性设置为 2）
• indent_char，缩进填充的内容（充满♂）
• jslint_happy:true，若你要搭配jslint使用，请开启此选项
• unformatted:["a","pre"]，这里放不需要格式化的标签类型。注意template也是默认不格式化的，.vue的template标签如果需要格式化请在.jsbeautifyrc重新定义不带template的声明属性。

.jsbeautifyrc配置官方文档地址：Click here

2.启用保存时自动

在VSCode的配置文件里添加editor.formatOnSave:truenone, Preserve-inline

으로 설정하는 것이 좋습니다) )

indent_size , 들여쓰기 길이 (eslint 기본 검사와 충돌을 피하기 위해 이 속성을

2

로 설정하는 것이 좋습니다)

indent_char, 채워진 콘텐츠 들여쓰기(♂로 전체)

jslint_happy:true, jslint와 함께 사용하려면 이 옵션을 활성화하세요.unformatted:[ "a","pre"], 서식이 필요하지 않은 태그 유형이 여기에 배치됩니다. template은 기본적으로 형식이 지정되어 있지 않습니다. .vue의 템플릿 태그 형식을 지정해야 하는 경우 .jsbeautifyrc에서 템플릿 없이 선언 속성을 다시 정의하세요.

.jsbeautifyrc 구성 공식 문서 주소: 여기를 클릭하세요

2. 저장 시 자동

을 활성화하고 VSCode 구성 파일에 editor.formatOnSave:true를 추가하세요. 즉, 저장 시 자동 서식을 구현할 수 있습니다

ps: 작업 편의를 위해 단축키를 맞춤 설정할 수 있습니다

1. 단축키 설정 단계

2. 맞춤 단축키

🎜🎜🎜🎜🎜

 {
  "key": "ctrl+b",//自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

🎜 ps: 필수 편집기의 사용자 정의 단축키를 수정하려면 여기를 클릭하여 키 위치를 직접 입력하세요🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 vscode에서 vue 파일 형식을 지정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!