VS Code Setup Guide

vscode-setup-guide.md

VS Code Setup Guide

This guide is focused around WordPress development and the requirements of using that day-to-day.

Install extensions

These can be installed in VS Code: Launch VS Code, Quick Open (CMD+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode stylelint.vscode-stylelint dbaeumer.vscode-eslint

Settings.json

Open up settings.json (CMD+P, >, Preferences: Open user settings (JSON)

"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass"
],
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass"
],
"editor.formatOnSave": false,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit",
    "source.fixAll.prettier": "explicit",
},
"[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[sass]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[postcss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[php]": {
    "editor.defaultFormatter": "valeryanm.vscode-phpsab",
    "editor.formatOnSave": true
}