Ví dụ về thiết lập môi trường phát triển web cho frontend

Với nhiều công cụ, phần mềm hỗ trợ cho Web Developer thì việc quản lý mã nguồn trong dự án đã có nhiều cải thiện. Team leader có thể thiết lập môi trường chuẩn về quy trình làm việc và sau đó chia sẻ cho team và cũng như người mới tham gia vào dự án. Việc này sẽ đảm bảo đồng bộ về định dạng mã nguồn tránh xung đột khi hợp nhất và dễ tìm và sửa lỗi hơn.

Mỗi công ty sẽ có quy định riêng về định dạng và thiết lập môi trường chuẩn riêng phù hợp với nhu cầu của họ và trong bài này ta sẽ chém gió về ví dụ thiết lập một môi trường chuẩn cho Frontend tha hồ bơi

Lưu ý

Cài đặt

VS code

Vui lòng vào trang web VS Code và tải phần mềm về cài đặt bình thường Bật tính năng “Setting Sync” bằng cách

1. Bấm vào biểu tượng bánh răng thiết lập  ở góc trái bên dưới của chương trình Vs code
2. Chọn Setting
3. Một cửa sổ Setting mới hiện ra thì bấm vào chữ Turn on Setting Sync chỗ góc trên bên phải cửa sổ Setting
4. Làm theo popup và bấm vào Sign in & Turn on để đăng nhập và lưu lại thiết lập bằng tài khoản Github của bạn

VS code extension

Cài VS code mà không có extension thì cũng chả khác nào nhậu không có mồi và chán bỏ xừ. Vậy nhưng mà tùy thuộc vào yêu cầu của từng loại dự án mà chúng ta sẽ có những extension

• Bắt buộc phải cài
• Khuyến khích cài
• Không được cài

Để cài extension thì trong vs code bấm vào biểu tượng cái bánh chưng bị cắt rời góc tư phía trên bên phải (trông nó giống thế này nè  ) trên thanh công cụ cạnh ngoài bên trái. Hoặc bấm tổ hợp Ctrl + Shift + X cho nó nhanh. Từ đó thì gõ tên extension muốn cài và bấm install thôi.

Cụ thể trong dự án này thì chia ra như sau

Extension bắt buộc

• ESlint của Dirk Baeumer
• Code Spell Checker của Street Side Software
• Live Server của Ritwick Dey
• Live Sass Complier theo Link này của Glenn Marks

Extension khuyến khích cài

• GitLens - Git supercharged của Eric Amodio
• TODO Highlight của Wayou Liu
• Thunder client của Ranga Vadhineni
• Auto Close Tag của Jun Han
• Auto Complete Tag của Jun Han
• Auto Rename Tag của Jun Han
• Bracket Pair Colorizer 2 của CoenraadS
• ES7 React/Redux/GraphQL/React-Native snippets của dsznajder
• html to JSX của Riaz Laskar để chuyển đổi từ html sang JSX của trong reactjs
• Color Hightlight của Sergii Naumow dùng để highlight màu của mã màu
• Material Icon Theme của Philip Kief dùng hiển thị icon của file, folder trên sidebar vs code đẹp
• Dracula Offical của Dracula Theme để có dark theme nếu muốn
• advanced-new-file của patbenatar dùng tạo file & folder mà không cần dùng chuột
• vscodevim của vscodevim để học di chuyển bằng vim code cho nhanh

Extension Không được cài

• Prettier vì thiết lập dự án theo ESLint rồi

Thiết lập Setting VS Code

Vào trong thiết lập Setting bằng cách sau

1. Vào biểu tượng bánh răng thiết lập  ở góc trái bên dưới của chương trình Vs code
2. Chọn Setting
3. Một cửa sổ Setting mới hiện ra thì bấm vào biểu tượng văn bản (giống như thế này  ) chỗ góc trên bên phải cửa sổ Setting sẽ có cửa sổ mở file setting.json ra. Ngoài ra thì có thể mở bằng cách khác là bấm tổ hợp phím Ctrl+Shift+P và gõ tìm Open Settings và tìm dòng Preferences: Open Setting (JSON) để mở file setting.json lên.

Sau đó thì copy và dán đoạn mã này vào file setting.json để đảm bảo format toàn team giống nhau

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "emmet.triggerExpansionOnTab": true,
  "eslint.format.enable": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10000,
  "files.eol": "\n",
  "files.exclude": {
    "**/*.js": {
      "when": "$(basename).ts"
    },
    "**/*.js.map": true,
    ".vscode": true,
    ".cache": true
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css"
    }
  ],
  "liveSassCompile.settings.includeItems": [
    "/**/main.scss"
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.watchOnLaunch": true
}

Nếu bạn có extension của VS Code nào giúp đỡ việc code hiệu quả. Hay cách thiết lập môi trường chuẩn cho Web Dev thì cứ phản hồi feeback mạnh vào nha. Cám ơn bạn.