Skip to content

Latest commit

 

History

History
63 lines (40 loc) · 2.35 KB

editors-setup.md

File metadata and controls

63 lines (40 loc) · 2.35 KB
Raw

Code editor setup used in the course

Brackets (First part of the course)

Theme

I use the OS X Style | Flat & Dark Brackets theme throughout most of the course.

Extensions used in course videos

Autosave Files on Window Blur to automatically save files when leaving the Brackets app.

Brackets Icons to display colorful filetype icons in the filetree.

VSCode (Second part of the course)

Theme

I use the Oceanic Next theme with the dimmed bg option. Link →

Extensions used in course videos

For each of the extensions, read the overview page in order to learn how to use it.

Auto Close Tag to automatically close HTML tags. Link →

Auto Rename Tag to automatically change matching HTML tags. Link →

Color Highlight to, as the name says, highlight colors in CSS. Link →

Paste and Indent to automatically indent pasted code. Link →

Path Intellisense to autocomplete filenames. Link →

Prettier to automatically format code. Link →

Settings

If you want your editor to work and look exactly the same way as mine does in the course videos, you can copy these settings to your own settings file. Just go to settings in VSCode, and on the right side, you can paste this code.

{
  "workbench.colorTheme": "Oceanic Next (dimmed bg)",
  "files.autoSave": "onFocusChange",
  "editor.minimap.enabled": true,
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,
  "editor.formatOnSave": false,

  "workbench.colorCustomizations": {
    "statusBar.background": "#333333",
    "statusBar.noFolderBackground": "#333333",
    "statusBar.debuggingBackground": "#263238"
  },
  "editor.fontSize": 16,

  "css.validate": false,
  "scss.validate": false,
  "less.validate": false,
  "editor.wordWrap": "on"
}