| title | date | subtitle | tags |
|---|---|---|---|
Moving to VSCode |
2018-03-22 05:20:41 -0700 |
I don't like change. I especially drag my feet when it comes to using a new tool for development. This is why I've been reluctant to change to VSCode from my comfy Atom IDE. Seeing the new StackOverflow developer survey results pushed me over to change finally. A majority of their users are now using Visual Studio Code.
And I'm feeling the rewards from the switch pretty quickly. It wasn't as painful as I expected, but there are a few things that needed to be sorted out to put me back into my comfy workflow. I decided to document them below.
Auto Close Tag ⭐️⭐️
After typing in the closing bracket of the opening tag, the closing tag will be inserted automatically. Not totally sure if I'm going to keep this one. It doesn't always wrap the inner content very well in my jsx. Looking for a better recommendation.
Auto Import ⭐️⭐️⭐️⭐️
Automatically finds, parses and provides code actions and code completion for all available imports.
Bookmarks ⭐️
Mark lines in the editor and easily jump to them. I haven't used this yet, but I thought I might?
This extension allows matching brackets to be identified with colours. I actually ended up disabling this because I found it distracting, but some people really like it.
Code Spell Checker ⭐️⭐️⭐️
A basic spell checker that works well with camelCase code. I actually found a spelling error in my copy on an application when I turned this on. 😬
Colorize ⭐️⭐️⭐️
Instantly visualize css colors in your css. It's a requirement nowadays.
Easy Icons ⭐️⭐️⭐️⭐️
I tried entirely too many icon themes. This one was my favorite. Icons per filetype is a lot more useful than I realized, especially in searching multiple files with similar names.
Eslint ⭐️⭐️⭐️⭐️
We use eslint, so this is a must-have.
GitHub ⭐️⭐️⭐️⭐️
Integration with GitHub. I really only use this to open the current file within GitHub within cmd+shift+p menu.
Add file or folder to .gitignore by just right clicking on file.
Highlight Matching Tag ⭐️⭐️⭐️⭐️
Highlight matching opening or closing tags
Import Cost ⭐️⭐️⭐️⭐️⭐️
Display inline in the editor the size of the imported package. Having never had this before - I've fallen in love.
JS Refactor ⭐️⭐️
Javascript automated refactoring tool. I haven't used this yet, but have great ambitions too. Especially for "Convert To Arrow Function".
Multiple cursor case preserve ⭐️⭐️⭐️⭐️⭐️
Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. I'm honestly surprised that so few people have this downloaded. I was super excited to find this.
Npm Intellisense ⭐️⭐️⭐️⭐️
Autocompletes npm modules in import statements.
One Dark Pro ⭐️⭐️⭐️⭐️
My favorite theme!
Log Output Colorizer ⭐️⭐️⭐️
Adds syntax colorization for *.log files. People love to send me .log files. 😐
Path Autocomplete ⭐️⭐️⭐️
Provides path completion.
Search node_modules ⭐️⭐️⭐️⭐️
Since node_modules are excluded from my global search, I need a way to dig into them when they have bugs. This is an ok way to do that. I wish I could search for specific code within the node_module more easily though.
SVG Viewer ⭐️⭐️
You can actually view SVG files in your editor.
Swig ⭐️
Swig support. Yes, we have some swig templates. We need to move off of them.
TODO Highlight ⭐️⭐️⭐️
Highlights TODO and FIXME in code. I didn't realize how many TODOs were in my code until I installed this. 😅
Version Lens ⭐️⭐️⭐️⭐️⭐️
Shows package version information for npm and bower. Amazing. What I've always wanted.
Generates random data directly into VS Code. I was hoping this would be useful in my fixtures.
The quickopen is something really weird and I wasn't having it. Remapped this to cmd+t
{ "key": "cmd+t", "command": "workbench.action.quickOpen" }
Also, I needed to map my 'go to current file in explorer' key.
{ "key": "shift+cmd+\\", "command": "editor.action.jumpToBracket" }
cmd+shift+e - shows editor in left hand side. Just memorize this.
cmd+shift+e - shows extensions in left hand side.
This is my settings.json within the vscode folder. This ensures that eslint auto fixes on save, but lets me put a debugger in my code!
{
"git.ignoreLimitWarning": true,
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.options": {
"rules": {
"no-debugger": "off"
}
}
}These are my settings. Some of these are extension specific. Notice this will turn on Intellisense for cypress.json files.
{
"editor.fontFamily": "Fira Code, Monaco, 'Courier New', monospace",
"editor.fontSize": 14,
"editor.lineHeight": 24,
"editor.fontLigatures": true,
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"editor.formatOnPaste": true,
"editor.wordWrap": false,
"explorer.openEditors.visible": 0,
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.renderWhitespace": "none",
"editor.renderControlCharacters": true,
"workbench.colorTheme": "One Dark Pro",
"bold_folder_labels": true,
"font_options": [
"gray_antialias",
"subpixel_antialias"
],
"indent_guide_options": [
"draw_normal",
"draw_active"
],
"overlay_scroll_bars": "enabled",
"workbench.activityBar.visible": false,
"workbench.startupEditor": "newUntitledFile",
"eslint.enable": false,
"sublimeTextKeymap.promptV3Features": true,
"json.schemas": [
{
"fileMatch": [
"cypress.json"
],
"url": "https://on.cypress.io/cypress.schema.json"
},
{
"fileMatch": [
"/bower.json"
],
"url": "http://json.schemastore.org/bower"
}
],
"workbench.statusBar.visible": true,
"workbench.iconTheme": "easy-icons",
"files.associations": {
"*.jsx": "javascriptreact"
}
}Add /// <reference types="Cypress" /> to top of .js or .ts test files.
I have to add this inside the source folder of any project where I am used mobx, just to avoid the warning for Experimental Decorators. Not happy about it, but whatever.
{
"compilerOptions": {
"experimentalDecorators": true
}
}Search was weird at first and took getting used to. But now I love it more than atom.
