VSCode/Vue.js로 구성 요소의 자동 가져오기 플러그인 (확장 기능) 을 만들었습니다.

입문

VSCode에서 vue로 개발할 때 구성 요소의 import를 기술하는 것이 번거롭기 때문에 import가 삽입된 플러그인을 만들어 보았습니다.

핑계부터 대볼게요.
너무 좋아요!그런 정신으로 만들었기 때문에 변수명 등 갖가지 구조가 가득하다.

다운로드(Vue.js AutoImport)

소스 코드

여기 정렬 플러그인과 함께 사용하면 좋습니다.

감상

영어 문서만 최종적으로 vscode의 d.ts에서 상상했던 곳이 있어서 힘들었어요.

모형 템플릿

vscode-generator-code를 사용하여 데이텀을 생성합니다.사용법 Qiita에도 기사가 있으니 저쪽을 보시는 게 좋을 것 같습니다.이 단계에서 "오, 아주 간단한 인상을 준다."

package.json

플러그인의 설정은 패키지입니다.json에 쓰다.요점밖에 없어요.contributes.configuration사용자 설정을 정의합니다.이번에는 루트 디렉터리를 설정할 수 있기 때문에 vuejsAutoImport.string 형식을 사용하여 루트 디렉터리를 정의합니다.contributes.commands이 플러그인의 명령을 등록합니다.ctrl+shift+p에서 기능을 사용할 수 있습니다.contributes.menus.editor/context컨텍스트 메뉴에 명령을 추가합니다.
contributes.commands에서 설정한 제목을 상하문 메뉴에 추가합니다.contributes.keybindings단축키에 대한 명령을 지정합니다.
마찬가지로 contributes입니다.commands에서 설정한 제목을 상하문 메뉴에 추가합니다.
참고로 윈도우즈와 맥은 각각 설정할 수 있을 것 같지만 맥이 없어서 테스트가 없습니다.잘 움직여.

명령 등록

extension.ts의activate 방법은 vscode가 시작될 때 실행됩니다.
따라서 vuejsAutoImport 명령을 등록합니다.

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand('extension.vuejsAutoImport', async () => {...

가져오기 문장 삽입

흐르다
1. 현재 선택한 텍스트를 가져옵니다.
2. 이 텍스트 grep 파일 이름을 사용합니다.
3. import 문장과components:{}에 추가합니다.

1. 현재 선택한 텍스트를 가져옵니다.

vscode.TextDocument.getWordRangeAtPosition()에서 현재 직위에서 선택한 텍스트를 가져옵니다.두 번째 매개변수에서 정규 표현식을 지정할 수 있습니다.<>안에 있는 텍스트를 원하기 때문에 다음과 같은 느낌이 있습니다./<.+?-?.+?(>| )/

2. 이 텍스트 grep 파일 이름을 사용합니다.

grep 사용globby, 파일 이름의 쓰기 방법이 많기 때문에 파일 이름의 변환 사용voca.
※ 파일 이름 변환
→ sample-component → SampleComponent → 'SampleComponent' + '.vue로 검색!
파일 이름이 어떤 상황으로 쓰였는지 모르기 때문에 있을 수 있는 상황부터 핥아보자.

const pathList: string[] = await grepAsync([
  path.join(rootPath, `**/${voca.camelCase(text)}.vue`),
  path.join(rootPath, `**/${voca.kebabCase(text)}.vue`),
  path.join(rootPath, `**/${voca.capitalize(text)}.vue`)
])

3. import 문장과components:{}에 추가합니다.

의 바로 아래에 가져온 경로를 추가합니다.
참고로 같은 이름의 파일이 여러 개 있으면 선택할 수 있습니다.

제어는 다음과 같습니다.

if (pathList.length === 1) {
  importCore(pathList[0])
} else if (pathList.length > 1) {
  vscode.window.showQuickPick(pathList).then(selectedPath => {
    importCore(selectedPath!)
  })
}

삽입된 import 문장은 이런 느낌이다.import ${ファイル名} from '${パス}' ${改行コード}components: {}에 추가하려면 다음과 같은 정규 표현식이 필요합니다./components( )*:( )*{[\s\S]*?(?=})/정규 표현식에서 명중된 문자의 마지막이 { 또는 ,인 경우 파일 이름을 직접 삽입합니다.
그렇지 않으면 , + 파일 이름을 삽입합니다.

Marketplaceに公開

여기도 검색하면 좋은 기사가 많이 나와요.
그나저나 화면 관리는 이런 느낌이에요.

最後に

언제 기분이 좋으면import와components:{}에 추가할 때 정렬하고 싶습니다.
그리고 난 그냥 못 찾았어. 그 플러그인이 이미 있다는 걸 알려주면 기뻐.
경품
매번 이 구성 요소의 프로필을 확인하고 정의로 날아가는 것은 매우 번거롭다
탭에 마우스를 걸고 도구 알림에 의 플러그인을 표시합니다.
vue-peek의 도구 제시판 느낌.

ダウンロード (Vue.js Peek)

ソースコード (GitHub)