YSHUSH

개발환경설정(snowpack) 본문

Coding/Bundler

개발환경설정(snowpack)

코딩; 2022. 9. 13. 17:58 
npm init

npm i -D snowpack

npm i -D @snowpack/plugin-sass

npm i -D eslint

npm i --save-exact prettier

npm i -D eslint-config-prettier eslint-plugin-prettier

 

· 루트경로에 public, src 폴더를 만들고 public폴더에 index.html파일 생성, src폴더에 js폴더 - index.js, scss폴더 - style.scss생성 후 구조작성

 

index.html - dist폴더에서 css와 js를 import 해야한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/scss/style.css" />
    <title>Date Picker</title>
  </head>
  <body>
    <script src="dist/js/index.js"></script>
  </body>
</html>

 

 

· snowpack.config.js파일 생성 후

module.exports = {
  mount: {
    public: { url: "/", static: true },
    src: { url: "/dist" },
  },
  optimize: {
    minify: true,
  },
  plugins: ["@snowpack/plugin-sass"],
};

 

· package.json - scripts부분 수정

  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  },

 

· .eslintrc.json 파일 생성 후

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

 

· .eslintignore 파일 생성 후

/node_modules
/build
snowpack.config.js

 

· .prettierrc.json 파일 생성 후

{
  "trailingComma": "all",
  "bracketSpacing": true,
  "useTabs": false,
  "semi": true,
  "printWidth": 80,
  "arrowParens": "avoid",
  "proseWrap": "never",
  "endOfLine": "auto",
  "tabWidth": 2,
  "singleQuote": true
}

 

· .prettierignore 파일 생성 후

/node_modules
/build
snowpack.config.js

 

· cmd + shift + p 누르고 settings 검색 후 preferences : Open Workspacee Settings(JSON) 열고 수정

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

· eslint, prettier - vscode 확장 설치

'Coding > Bundler' 카테고리의 다른 글

Webpack 개발환경 설정2  (0) 2022.09.09
Webpack 프로젝트 초기 구성  (0) 2022.08.31
Parcel - babel  (0) 2022.08.31
'Coding/Bundler' Related Articles more