본문 바로가기

vscode4

react-create-app으로 만든 typescript 프로젝트에 eslint 적용하기 적용해 보면서 하도 고생해서 정리해 봅니다. Create-react-app 먼저 create-react-app를 통해서 프로젝트를 생성합니다. $ yarn create react-app my-app-name --template=typescript $ cd my-app-name Eslint 생성된 프로젝트 폴더로 이동한 후 eslint를 설치 해 줍니다. $ yarn add -D eslint 이게 yarn eslint --init을 통해서 eslint를 설정해 줍니다. $ yarn eslint --init ? How would you like to use ESLint? To check syntax only To check syntax and find problems ❯ To check syntax, fin.. 2020. 9. 15.
vscode에서 vue 프로젝트 생성시 ESlint와 Prettier 설정해 주기 기존에 사용하던 TSLint가 더이상 지원을 받지 못 하게 되면서, ESlint로 넘어가야 상태가 되었습니다. 여기서는 Vue 프로젝트를 생성하면서 ESlint와 Prettier를 사용하는 세팅을 간단하게 설정하려고 합니다. 사용하는 툴은 vscode입니다. vue create myproject 형태로 기본 프로젝트를 선택 합니다. > npx vue create myproject ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex (*) CS.. 2020. 4. 19.
vscode에서 JetBrains Mono 폰트 사용하기 개발툴로 유명한 JetBrains에서 코딩용 새로운 고정폭폰트를 공개 했습니다. 상업적용도와 비상업적용도 모두 사용이 가능한 아파치2.0 라이센스 입니다. 그런데, 이 폰트에 보면 합자(ligature)기능이 있습니다. 이 기능은 코딩하다 보면 많이 쓰이는 ==이나 !=를 합자 형태로 표시해서 가독성을 높여주는 기능입니다. 대략적으로 보면 아래와 같이 차이가 있습니다. 그리고, vscode에서는 합자 기능을 사용할 수 있습니다. 설정하는 방법은 File > Preferense > Settings (단축키: Ctrl + ,)을 선택하고 상단에 Open Settings(JSON) 버튼을 눌러 줍니다. 그리고, 아래 내용을 추가해 주면 됩니다. { "editor.fontFamily": "Jetbrains Mo.. 2020. 1. 17.
VSCode에서 Live2d 캐릭터 띄우기.. 먼저 띄운 화면을 보고 가시죠~캐릭터 얼굴이 마우스 움직이는 방향으로 움직입니다.너무 귀엽죠?그러면, 설치를 해 볼까요?먼저, 확장프로그램에서 live2d를 검색해서 설치해 줍니다.그리고 재실행을 해주시면, 아무것도 안 나옵니다. -_-;F1 또는 Ctrl+Shit+P을 누르고 live2d install을 해 줍니다. 그리고 다시 VSCode를 실행 해 줍니다.그러면, 고양이가 왼쪽 하단에 나옵니다.그리고, 나오는 경고… 살포시 무시하기 위해서 고양이를 살짝 옮기시고, 기어 버튼을 누릅니다.그리고 그만볼래(Don't Show Again)을 눌러 줍니다.우리는 고양이에 만족 할 순 없으니.. 다른 캐릭터를 찾아 봅니다.https://github.com/summerscar/live2dDemo위 주소를 이동해.. 2019. 1. 23.