.README.config.md

Cấu hình cho Visual Studio Code

(VSCode Configuration)

Trát Quang Thụy

Ngày 21-4-2020

---

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

---

1. Cài đặt Visual Studio Code

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

Cài đặt ESLint extension cho VSCode

• Trong VSCode, nhấn F1 rồi run dòng lệnh sau:

  ext install dbaeumer.vscode-eslint
  

• Hoặc vào Extensions slidebar của VSCode, gõ ESLint (của Dark Baeuner).

• Homepage: https://eslint.org/

• Document: https://eslint.org/docs/user-guide/getting-started

Cài đặt Prettier extension cho VSCode

• Trong VSCode, nhấn F1 rồi run dòng lệnh sau:

  ext install esbenp.prettier-vscode
  

• Hoặc vào Extensions slidebar của VSCode, gõ Prettier - Code formatter (của Esben Petersen).

• 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 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, mở Start Menu/Windows System/Command Prompt (CMD) hay PowerShell (có thể dưới quyền Administrator nếu project ở ổ C:\), rồi gõ lệnh sau:

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

    cd\

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

    cd "project_folder"

    • Ví dụ

      cd "G:\R\Projects\ddRMarkdown"

    • Hoặc

      cd "G:/R/Projects/ddRMarkdown"

  • Cài Prettier package

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

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

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

• Package store:

  • Prettier: https://www.npmjs.com/package/prettier

  • ESLint: https://www.npmjs.com/package/eslint

  • eslint-config-prettier: https://www.npmjs.com/package/eslint-config-prettier

  • eslint-plugin-prettier: https://www.npmjs.com/package/eslint-plugin-prettier

---

3. Cấu hình cho các file cấu hình của project, ở thư mục gốc (root project)

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ụ

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

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

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

• Cấu hình VSCode cho Workspace của project.

• Ví dụ

  {
    "folders": [
      {
        // ddRMarkdown
        "name": "ddRmarkdown",
        "path": "."
      },
      {
        // Datasets
        "name": "Datasets",
        "path": "./_datasets"
      }
    ],
    "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ụ

  {
    "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ụ:

  _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ụ:

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

• Document:

  • https://prettier.io/docs/en/integrating-with-linters.html

  • https://www.robinwieruch.de/prettier-eslint