(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ồirun
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ồirun
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). -
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:
-
Xem nhanh câu lệnh của npm: https://www.sitepoint.com/beginners-guide-node-package-manager/
-
Installing packages
global
ly: https://docs.npmjs.com/downloading-and-installing-packages-globally -
Installing packages
local
ly: 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) hayPowerShell
(có thể dưới quyềnAdministrator
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
packagenpm install prettier --save-dev --save-exact
-
Cài
ESLint
,eslint-config-prettier
, vàeslint-plugin-prettier
packagenpm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
-
-
Package store:
-
Prettier: https://www.npmjs.com/package/prettier
-
eslint-config-prettier: https://www.npmjs.com/package/eslint-config-prettier
-
eslint-plugin-prettier: https://www.npmjs.com/package/eslint-plugin-prettier
-
Các file sau đây sẽ được đặt ởở mỗi thư mục, nếu cần cấu hình riêng.
-
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
-
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
-
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
-
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):
-
Ví dụ:
{ "env": { "es6": true }, "extends": ["eslint:recommended", "prettier"] }
-
Document: