Sharryhong's Front-End
  • About Sharryhong's Front-End Blog.
  • Front-End Dev
    • Flutter
      • API Key 안전하게 숨기기. Cloudflare Workers!
      • Web CORS 에러
    • Vue.js
      • usePagination - composition api (vue2)
      • Pagination Component
      • Vue Image Skeleton
      • Sort an Array of Objects by Boolean property
      • Dynamic Components
      • LoadingBar Component
      • composition-api 사용하여 menu 의 outside click 시 close
      • vue+TypeScript
      • Vue.js 개발자를 위한 VS Code
      • Vue3 Chrome Extension
      • input file 선택된 파일 명 reset하기
      • element 내부 scroll 될 때, ScrollTop 값에 따라 div를 보이게, 안보이게 제어하기
      • 진입한 url path에 맞게 메서드 실행
    • React
      • 절대경로(absolute path) 설정, jsx파일로 이동 설정
      • useContext rerender issue
      • Firebase v9 Auth with React
      • Firebase v9 Realtime Database with React
      • React Star Rating (별점 표시)
      • React App deploying (배포)
    • Next.js
      • CSR, SSR, Next.js
    • API Mocking
      • Vue 에서 msw 적용하기
    • Storybook
      • styled-component theme.ts가 storybook엔 적용안되는 이슈
      • storybook에서 alias path 안되는 이슈
      • storybook에 Global Style 적용하기
  • etc
    • brew update
    • npm upgrade (mac)
  • DEV BETTER
    • Clean Code
      • Clean Code JavaScript 강의
        • Variables - 변수 다루기
        • Boundary - 경계 다루기
        • Conditional - 분기 다루기
        • Array - 배열 다루기
      • Tip. 클린 코드를 위한 5가지 팁
      • Tip. 코딩 잘하는 팁 3가지
    • 웹 성능 최적화 (performance)
      • performance 강의
        • loading, rendering performance
        • Tools
        • Image size optimization
        • bottleneck (병목) code 탐색
Powered by GitBook
On this page
  • 필요 설치
  • 편리한 기능들

Was this helpful?

  1. Front-End Dev
  2. Vue.js

Vue.js 개발자를 위한 VS Code

2021-07-27

Previousvue+TypeScriptNextVue3 Chrome Extension

Last updated 3 years ago

Was this helpful?

참고링크 :

참고링크 : 강의 내용 중

필요 설치

  • VS Code 최신으로 다운로드 :

  • Vetur, Vue VScode Snippet 플러그인 설치

편리한 기능들

  • 스니펫 `vue` tab키 누르면 아래와 같이 코드 자동생성

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 타입스크립트의 경우 스니펫 `ts` 후 알맞는 버전을 선택하면, 타입스크립트를 작성할 수 있는 기본 싱글파일컴포넌트 구조가 작성된다.

  • 스니펫 `vdata` 작성시 아래 코드 자동 생성

data() {
    return {
      key: value
    }
  },
  • 컴포넌트 파일이동 : mac에서는 option키 누르고 컴포넌트 클릭시 이동

https://www.vuemastery.com/blog/vs-code-for-vuejs-developers/
https://www.inflearn.com/course/vue-ts
https://code.visualstudio.com/