반응형 Tools/VSCode10 [VSCode] eslint error: Delete `␍` prettier/prettier eslint와 prettier를 같이 사용하면서 작업을 하는 도중 갑자기 Delete `␍` prettier/prettier 라는 에러가 발생하였다. 찾아보니 prettier 2.0이상 부터 endOfLine 기본 옵션이 'auto' 에서 'lf' 로 변경되어서 발생하는 에러라고 한다. .eslintrc.js 파일에서 아래와 같이 설정해주면 문제가 해결된다. rules: { "prettier/prettier": ["error", { "endOfLine": "auto" }], }, 2022. 6. 15. [VSCode] sample/dummy text 집어넣기 (ft. Emmet) 더미 텍스트가 필요한 경우 VSCode 같은 것들에는 Emmet이 기본적으로 지원되는 에디터인데, 그 기능을 사용하여 손쉽게 더미 텍스트를 만들 수 있다. * Emmet에 대해 상세하게 알고 싶으면 아래 링크를 통해 확인해봐도 좋을 것 같다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com lorem 이라고 입력한 후 탭 혹인 엔터를 클릭하면 기본적으로 설정되어 있는 더미 텍스트가 생성된다. Lorem ipsum dolor sit amet consectetur adipisicing el.. 2022. 5. 16. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(4) - 웹팩과 바벨 동시 사용 시 트랜스파일링 변환 오류 이전 글 [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 에서 바벨 설정 후 웹팩 빌드를 하였는데, 이상하게 IE에서 오류가 발생해 작동을 안하는 현상이 발생하였다. 화살표 함수가 그대로 존재하기 때문에 에러가 발생한것인데, babel 설정에 target을 줘도 문제가 해결되지않았다. 도대체 왜 이런것일까...? 이것때문에 몇시간을 소비했는지 모르겠다. 찾아보니까 웹팩에 문제가 있었더라 Webpack v5 부터 트랜스파일을 기본적으로 es6로 한다고 한다. 버전이 올라가면서 변경될것인지 아니면 계속 이상태로 갈것인지는 알 수 없으나, 일단 변경을 해주는게 맞다 싶다. 그래서 webpack.config.js 파일에서 target 설정을 줄 수 있는데, https:.. 2022. 3. 2. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 바벨을 설정하기에 앞서 바벨에 대해서 알아두면 좋은데, 쉽게 말하면 최신 사양의 자바스크립트 코드 (ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링) 시켜주는 녀석이라고 할 수 있다. 실제로 공식 웹사이트에서도 다음과 같이 설명하고 있다. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: 이제 바벨 설정을 하나씩 해보도록 하자. 1.. 2022. 3. 2. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(2) - 웹팩 기본 loader 설정하기 VSCode에서 웹팩(Webpack)을 설정하게되면 webpack.config.js 웹팩 설정파일을 사용하게 된다. 이 webpack.config.js 파일에서 loader를 설정하는 방법에 대해 알아보자. loader를 설정하기에 앞서 loader 설정을 왜 해주는지에 대해 설명하자면, js끼리만 import해서 사용한다면 웹팩을 빌드하면 상관 없지만 여기에 css 같은것들이 들어가면 오류가 발생하기 때문이다. 웹팩은 자바스크립트 뿐만 아니라, 이 loader를 통해 css나 이미지, 웹폰트, vueJS 등 다양한 종류의 파일을 함께 번들링할 수 있는데, 사용법만 알면 그 외에는 동일하게 처리하면 되기 때문에 가장 흔하게 사용되는 css관련한 loader에 대해서만 정리하고자 한다. 1. CSS 로더를.. 2022. 3. 1. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(1) - 웹팩 기본 설정 VSCode에서 웹팩(Webpack)을 설정해보자. 당연하게도 node.js를 통해 뭔가를 설치하고 설정하려면 package.json이 있어야한다. package.json이 있다면 이제 1. 명령어를 통해 웹팩 라이브러리를 설치한다. (둘 중 하나만) npm install --save-dev webpack webpack-cli npm install -D webpack webpack-cli 이러면 설치가 진행되며, 설치가 완료되고 나서 package.json을 살펴보면 다음과 같이 나와있다. { "name": "prj01_vanillajs_es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \".. 2022. 3. 1. [VSCode] package.json 설정 - NodeJS를 사용한 npm 패키지관리 VSCode에서 프로젝트에 각종 확장 모듈등을 설치하고자 할때 NodeJS의 npm을 많이 사용하게 된다. 그리고 그러한 모듈들을 관리하고자 하는 역할을 하는 녀석인데 필요하기도하고 한번 정리하고 넘어가도록 하자. (뭔가를 사용할때 뭔지 모르고 사용하면 답답해서 정리하고자 한다.) 1. 우선 npm을 사용하기 위한 Node.js를 설치해주어야 하는데, https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽의 16.14.0 LTS 버전을 받아서 사용해주도록 하자. (안정성 측면에서 높기 때문에 이전 버전을 사용한 것이고 최신 버전을 사용하고자 한다면 우.. 2022. 3. 1. [VSCode] HTML 기본 템플릿 자동완성 기능 사용하기 VSCode로 HTML 파일을 생성하면 처음에 역시 아무것도 존재하지않는데, HTML을 구성하는 태그들을 반복해서 작성하는건 매우 귀찮은 일이니 VSCode에서 제공하는 자동완성 기능을 사용해보자. 사용법은 매우 간단하다. 1. 우측 하단에 파일 형식이 HTML이 맞는지 부터 확인한다. (가끔 다른 형태의 HTML인 경우에는 자동완성 기능이 작동하지 않는다고 하니까 하는 확인절차다.) 2. 그리고 "!" 느낌표를 입력하고 엔터를 눌러주면... (저렇게 느낌표를 입력하고 자동완성 창이 나온 상태에서 엔터를 눌러주라는 의미이다.) * 추가적으로 "html:5"를 입력해도 가능하다 3. 기본 태그 자동 완성! 4. 그리고 필요에 따라 수정해서 사용하면 된다. (예를 들어 lang='en' 을 lang='ko'.. 2022. 3. 1. [VSCode] 개발할 때 유용한 확장 프로그램 추천 (UPDATE: 2022-06-09) VSCode를 본격적으로 사용하기에 앞서 유용한 확장 프로그램 몇가지를 추가하고 시작해보자. (마지막 수정일자 : 2022.06.09 / 계속해서 추가할 계획... 이것저것 수집해보자) 확장 프로그램 검색 및 추가하기 위해서는 [Ctrl + Shift + x] 단축키를 눌러주거나, 좌측 메뉴에 무슨 블럭처럼 생긴걸 눌러주면 이동할 수 있다. 1. Korean(사용법) Language Pack for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Mar.. 2022. 2. 28. 이전 1 2 다음 반응형
