useful Extensions

henry·2024년 7월 10일

vscode

제가 사용하는 유용한 Extension입니다.

1. Auto Rename Tag

HTML태그를 입력하면 자동으로 닫는 태그를 생성합니다.

2. Colonize

Ctrl+s(저장)을 하면 자동으로 소스 코드 끝 부분에 ;를 추가합니다.

3. Colorize

CSS 색상을 미리 확인할 수 있습니다.

4. Error Lens

실시간으로 소스 코드의 에러를 해당 라인에 표출합니다.

5. ESLint

소스 코드의 규칙을 설정합니다.

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    "no-unused-vars":"off",
    "react-prop-types":"off"
  },
}

6. Image Preview

이미지 미리보기 기능을 제공합니다.

7. IntelliCode

코드 자동완성 기능을 제공합니다.

8. Prettier - Code formatter

코드를 예쁘게 정렬해주는 기능을 제공합니다.

Extension에서 Prettier 검색 후, 위의 Extension을 Install 후,
Settings.json파일에서 아래 항목을 추가해준다.

.prettierrc

{
  "arrowParens": "always",
  "bracketSpacing": false,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 3,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

More Prettier Options

settings.json

{
  "json.schemas": [
    
  ],
  "workbench.colorTheme": "Solarized Dark",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.jsxSingleQuote": true,
  "prettier.arrowParens": "always",
  "prettier.bracketSameLine": false,
  "workbench.settings.applyToAllProfiles": [],
  "notebook.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 100,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme"
}