Highlighting
2gua.rainbow-brackets - bracket highlights
cobaltblu27.rainbow-highlighter - highlight multiple variables you select
SirTori.indenticator - highlights indent level
vincaslt.highlight-matching-tag
luqimin.velocity - velocity syntax highlighting used in HSV / L2S theme portals
letrieu.expand-region - Expand selected text out from current selection
Comments
aaron-bond.better-comments - Clearly see TODOs vs other types
Styling
bierner.color-info - RGB / HSL etc color info
kamikillerto.vscode-colorize - Highlights colors behind hex codes/RGB
pranaygp.vscode-css-peek - reveals what classes are doing from within your html
mrmlnc.vscode-csscomb - reorders CSS properties (only in use in agency atm)
sibiraj-s.vscode-scss-formatter - formats scss (not always needed if prettier already set up)
Time-saving
sleistner.vscode-fileutils - adds file utils like'duplicate file' etc
techer.open-in-browser - file util
christian-kohler.npm-intellisense - autocompletes import/require statements
christian-kohler.path-intellisense - autocompletes paths
Zignd.html-css-class-completion - autocompletes tags and classes
msjsdiag.cordova-tools - hints and controls for Apache cordova, start app emulator etc
ritwickdey.LiveServer - spins up instant server from html
alefragnani.numbered-bookmarks - easily create and jump between bookmarks in long files
Code Quality
cmstead.jsrefactor - quick convert/refactor js code blocks
dbaeumer.vscode-eslint - LINTING (needs agreed config with prettier, TBC)
EditorConfig.EditorConfig - Add .editorconfig files to projects for consistent settings (overrules personal / workspace settings - use with eslint + prettier)
esbenp.prettier-vscode - FORMATTING (needs agreed config with eslint, TBC)
SonarSource.sonarlint-vscode - Flags potential code errors (needs global or per-project rules, TBC)
Version Control
eamodio.gitlens - Git controls inside the vs code
johnstoncode.svn-scm - SVN controls inside the vs code
ms-vsts.team - connect to Azure repos, open PRs etc all from the IDE (note: part of a wider extension pack that would be useful for some devs!)
React
blanu.vscode-styled-jsx - syntax highlighting for JSX
jpoissonnier.vscode-styled-components - Giftli, Ribbon & agency prototype use styled components
dsznajder.es7-react-js-snippets - shortcuts for react code snippets
Personal Preferences
wesbos.theme-cobalt2 - a theme I like 😃
PKief.material-icon-theme - an icon theme I like
FIRA code font family (not an extension - see below)
Font: Fira Code
A nice free font designed for use in code editors that includes ligatures
Download Fira code
Follow install instructions
Add to VS Code settings:
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace", "editor.fontLigatures": true,
Other Editor Settings
Some of these are extension-specific, but many are useful for everyone to bring code consistency.
These can be reviewed / changed over time. Especially the linting/code quality settings will need refinement.
// colorize extension
"colorize.include": [],
"colorize.languages": [
"javascript"
],
// VS Code diff view
"diffEditor.ignoreTrimWhitespace": true,
// editor settings
"editor.accessibilitySupport": "off",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.letterSpacing": 0.4,
"editor.formatOnSave": true,
"editor.insertSpaces": false,
"editor.renderIndentGuides": true,
"editor.suggestSelection": "first",
"editor.tabCompletion": "on",
"editor.tabSize": 2,
"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 100,
// Emmet (autocomplete and shortcuts)
"emmet.includeLanguages": {
"java": "html",
"javascript": "javascript",
"javascriptreact": "javascriptreact",
"js": "js",
"markdown": "html",
"velocity": "html"
},
"emmet.triggerExpansionOnTab": true,
// eslint config
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
// file explorer preferences (vs code sidebar)
"explorer.compactFolders": false,
"explorer.confirmDelete": false,
// Optional File preferences
"files.associations": {
".csscomb.json": "jsonc",
"*.njk"; "html",
},
"files.eol": "\n",
// Optional: choose your most common file type:
"files.defaultLanguage": ".html",
// Git lens settings
"git.autofetch": true,
"gitlens.views.compare.files.layout": "tree",
"gitlens.views.compare.location": "gitlens",
"gitlens.views.fileHistory.location": "gitlens",
"gitlens.views.lineHistory.location": "gitlens",
"gitlens.views.repositories.location": "gitlens",
"gitlens.views.search.location": "gitlens",
// Javascript - REALLY HELPFUL
"javascript.updateImportsOnFileMove.enabled": "always",
// Liveserver extension
"liveServer.settings.donotShowInfoMsg": true,
// Prettier config
// Optional but important: If prettier extension enabled for other languages, disable for javascript, as ES lint is handling that.
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
// Sonarlint config
// I have lots of rules turned on/off here - needs global review