DEV Community: Andrew Usher

Simplifying VSCode

Andrew Usher — Mon, 12 Jun 2023 02:30:05 +0000

Introduction

As a long-time user of Visual Studio Code (VSCode), I've accumulated a vast array of extensions, settings, and files that have made my workspace cluttered and overwhelming. I found myself spending more time searching for files and navigating through menus than actually coding. It was time for a change.

In this blog post, I'll share my experience of cleaning up and simplifying my VSCode workspace. I'll discuss the steps I took to remove unused extensions, organize my files, customize settings, and use keyboard shortcuts and snippets to streamline my workflow. By the end of this post, you'll have a better understanding of how to optimize your workspace and improve your coding experience. So, let's dive in!

Extensions I Removed

codecrumbs-vs-code - Never used it after the first few weeks of installing
Codetour - Same as above
Import Cost - I use Bundlephobia for this instead
Playwright Test for VSCode - I use Playwright's UI mode for this functionality now
Polacode - I use ray.so instead now
ReacTree - Seemed cool when I looked at it, but I've never had a use case for it
Remove Non ASCII Chars - The linting tools I use already handles this

Status Bar Sections Removed

Workspace Trust
GitLens Commit Graph
Problems
Editor Selection
Editor Indentation
Editor Encoding
Editor End of Line
Editor Language Status
Editor Language
Prettier
Feedback
Notifications

Sidebar Icons Removed

After years of use, the sidebar in VSCode can become cluttered with icons, making it difficult to navigate and find what you need. To simplify my workspace, I recently removed the below sidebar icons:

Run and Debug
Extensions
GitLab Workflow
GitLens
TODOs
Bookmarks
Accounts

Conclusion

In conclusion, by removing unused extensions, status bar sections, and sidebar icons, as well as organizing files, customizing settings, and using keyboard shortcuts and snippets, I was able to simplify my VSCode workspace and improve my coding experience. It's important to regularly review and optimize your workspace to ensure that it remains efficient and clutter-free.

Updating from @sveltejs/kit@1.0.0-next.350 to @sveltejs/kit@1.0.0-next.403

Andrew Usher — Sat, 06 Aug 2022 18:36:19 +0000

TLDR: Here's the commit that I made all code changes in

I recently updated the version of sveltekit I'm using for qr-gen, and it was quite the experience :). There's not much documentation out there (at least that I could find), so I'm documenting what I needed to change here.

Update dependencies

yarn add @sveltejs/kit@latest @sveltejs/adapter-auto@latest --exact

Note: if you're using any other packages under the @sveltejs org, you'll likely need to update those as well.

Add vite.config.js

Next, I needed to create vite.config.js in the root of the repo and add the svelte-kit plugin to the config:

import {sveltekit} from '@sveltejs/kit/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()]
}

export default config

You'll also need to remove any configuration you have under the kit.vite property in svelte.config.js. Consulting the vite configuration docs should be helpful here.

Update API Routes to Use Uppercase Method Names

Updating export const post to export const POST (and so forth for other request methods)

How To Use Default Function Parameter Values In JS

Andrew Usher — Sun, 08 May 2022 00:21:17 +0000

Function parameters are undefined by default in JavaScript. Sometimes, you want to define a default parameter in this case. Before ES6 (also known as ES2015), creating default paramaters was a little tedious:

function createName(firstName, lastName) {
  firstName = typeof firstName === 'undefined' ? 'Jane' : firstName;
  secondName = typeof secondName === 'undefined' ? 'Doe' : secondName;

  return firstName + ' ' + secondName;
}

console.log(createName()); // Jane Doe

With the introduction of default parameter values in ES6, the above could be simplified to:

function createName(firstName = 'Jane', lastName = 'Doe') {  
  return firstName + ' ' + secondName;
}

console.log(createName()); // Jane Doe

NPM Needs: snarkdown

Andrew Usher — Mon, 11 Apr 2022 02:22:11 +0000

What Is It?

snarkdown is a barebones markdown parser with the sole purpose of converting markdown to HTML. This could be used in cases where you don't need a full fledged tool like marked or remark

Usage Examples

import snarkdown from 'snarkdown'
console.log(snarkdown('# Hello World'))
// '<h1>Hello World</h1>'

More Info

Github Repo: developit/snarkdown
Author: Jason Miller

NPM Needs: pretty-bytes

Andrew Usher — Sat, 09 Apr 2022 22:31:15 +0000

Note: this was originally posted on my personal site

What Is It?

pretty-bytes is a utility used to convert an integer form of bytes to a more human readable form (bytes to kilobytes, for example). pretty-bytes-cli is a command line wrapper for the same package.

Usage Examples

import prettyBytes from 'pretty-bytes'

prettyBytes(100)
// '100 B'
prettyBytes(1650)
// '1.65 kB'

More Info

Github Repo: sindresorhus/pretty-bytes
Author: Sindre Sorhus