.README.config.md

In BabyMouse/Rb3m: Rb3m package

Cấu hình cho Visual Studio Code

(VSCode Configuration)

• Trát Quang Thụy
• Ngày tạo: 2020-04-21
• Cập nhật: 2020-04-28

Cấu hình Workspace cho Rb3m project, để làm việc với Visual Studio Code.

Nội dung

1. Cài đặt Visual Studio Code

• Cài đặt ESLint extension cho VSCode
• Cài đặt Prettier extension cho VSCode

2. Cài đặt Node.js

• Cài đặt ESLint, Prettier, eslint-config-prettier, eslint-plugin-prettier packages ở chế độ local cho từng project (thay vì global)

3. Tùy chỉnh cho các file cấu hình của project ở thư mục gốc

• File .vscode/settings.json
• File *.code-workspace (ví dụ: ddRMarkdown.code-workspace)
• File .prettierrc
• File .prettierignore
• File .eslintrc

1. Cài đặt Visual Studio Code

• VSCode download: https://code.visualstudio.com/

Cài đặt ESLint extension cho VSCode

• [ ] Trong VSCode, vào Extensions slidebar (thanh cuộn bên trái) của VSCode, gõ ESLint (của Dark Baeuner).
• [x] Hoặc nhấn F1 rồi run dòng lệnh sau:

markdown ext install dbaeumer.vscode-eslint

• Homepage: https://eslint.org/
• Document (xem cho biết, nhưng không xài): https://eslint.org/docs/user-guide/getting-started

Cài đặt Prettier extension cho VSCode

• [ ] Trong VSCode, vào Extensions slidebar của VSCode, gõ Prettier - Code formatter (của Esben Petersen).
• [x] Hoặc nhấn F1 rồi run dòng lệnh sau:

markdown ext install esbenp.prettier-vscode

• GitHub: https://github.com/prettier/prettier
• Document: https://prettier.io/docs/en/

2. Cài đặt Node.js

Do chúng ta cần npm để cài đặt eslint-plugin-prettier, nhằm xử lí xung đột giữa ESLint và Prettier.

• Node.js download: https://nodejs.org/en/
• npm homepage: https://www.npmjs.com/
• npm document:
• https://docs.npmjs.com/
• Xem nhanh câu lệnh của npm: https://www.sitepoint.com/beginners-guide-node-package-manager/
• Installing packages globally: https://docs.npmjs.com/downloading-and-installing-packages-globally
• Installing packages locally: https://docs.npmjs.com/downloading-and-installing-packages-locally
• Install multiple ppackages: https://futurestud.io/tutorials/npm-quick-tips-1-install-packages

Cài đặt ESLint, Prettier, eslint-config-prettier, eslint-plugin-prettier packages ở chế độ local cho từng project (thay vì global)

• [ ] Trong Windows (nếu project ở ổ C:\, thường cần đến quyền Administrator)

• [ ] Run Command Prompt

  • [ ] Mở Start Menu/Windows System/Command Prompt.
  • [x] Hoặc nhấn phím Windows + R, rồi gõ cmd.

• [x] Hoặc chạy PowerShell (nên dùng thay Command Prompt)

  • [ ] Mở Start Menu/Windows PowerShell/PowerShell
  • [x] Hoặc nhấn phím Windows + R, rồi gõ PowerShell

• Chuyển về thư mục gốc

  PowerShell cd\

• Chuyển đến thư mục project

  PowerShell cd "project_folder"

  • [ ] Ví dụ

  PowerShell cd "F:\R\Projects\Rb3m"

  • [x] Hoặc

  PowerShell cd "F:/R/Projects/Rb3m"

• Cài Prettier package

  PowerShell npm install prettier --save-dev --save-exact

• Cài ESLint, eslint-config-prettier, và eslint-plugin-prettier package

  PowerShell npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev

• [x] Hoặc

• [ ] RStudio/Terminal

• [x] VSCode/Terminal

• Lần lượt copy, rồi chạy các dòng lệnh sau

  PowerShell npm install prettier --save-dev --save-exact npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev

• Hoặc chạy như run script trong RStudio với phím tắt Ctrl + Shift + Enter.

• Package store:

• Prettier:
  • https://www.npmjs.com/package/prettier
  • https://github.com/prettier/prettier
• ESLint:
  • https://www.npmjs.com/package/eslint
• eslint-config-prettier:
  • https://www.npmjs.com/package/eslint-config-prettier
  • https://github.com/prettier/eslint-config-prettier
• eslint-plugin-prettier:
  • https://www.npmjs.com/package/eslint-plugin-prettier
  • https://github.com/prettier/eslint-plugin-prettier

3. Tùy chỉnh cho các file cấu hình của project ở thư mục gốc

Các file sau đây sẽ được đặt ở mỗi thư mục, nếu cần cấu hình riêng.

File .vscode/settings.json

• Cấu hình VSCode cho từng thư mục của project.
• Ví dụ

javascript { "editor.formatOnPaste": false, "editor.formatOnSave": false }

• Setting document: https://code.visualstudio.com/docs/getstarted/settings

File *.code-workspace (ví dụ: Rb3m.code-workspace)

• Cấu hình VSCode cho Workspace của project.
• Ví dụ

javascript { "folders": [ { // Rb3m "name": "Rb3m", "path": "." }, { // R "name": "R", "path": "./R" } ], "settings": { /** ** VSCode setting * ref: https://code.visualstudio.com/docs/getstarted/settings */ "files.associations": { ".eslintrc": "jsonc" }, "[markdown]": { "editor.fontFamily": "Consolas, 'Courier New', monospace", //"editor.wordWrap": "on" }, /** * ref: https://github.com/tonsky/FiraCode */ "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.rulers": [100, 150, 180], "editor.tabCompletion": "on", "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${rootPath}${separator}${appName}" } }

• Setting document: https://code.visualstudio.com/docs/editor/multi-root-workspaces#_settings

File .prettierrc

• Cấu hình cho Prettier.
• Ví dụ

javascript { "semi": false, "overrides": [ { "files": ["*.prettierrc"], "options": { "printWidth": 150, "tabWidth": 2 } } ] }

• Configuration file: https://prettier.io/docs/en/configuration.html
• Options document: https://prettier.io/docs/en/options.html

File .prettierignore

• Cấu hình cho Prettier, nhằm bỏ qua những file không cần đến formater ở project folder.
• Ví dụ:

text _template/pandoc_template_default.html;

• Document (xài giống Git):
• Ignoring Files: https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository#Ignoring-Files
• Pattern format: https://git-scm.com/docs/gitignore#_pattern_format

File .eslintrc

• Cấu hình cho ESLint, nhằm tránh xung đột với Prettier.
• Ví dụ:

javascript { "env": { "es6": true }, "extends": ["eslint:recommended", "prettier"] }

• Document:
• https://prettier.io/docs/en/integrating-with-linters.html
• https://www.robinwieruch.de/prettier-eslint

BabyMouse/Rb3m documentation built on June 4, 2020, 11:21 a.m.