This repository has been archived by the owner before Nov 9, 2022. It is now read-only.
What extensions do you use in VSCode? #406
Labels
packages
Thoughts/opinions/personal use of 3rd party packages/libraries/frameworks
Comments
|
Here's the list:
To generate this list: const {execSync, spawn} = require('child_process')
const result = execSync('code --list-extensions')
const list = String(result)
.split('\n')
.filter(Boolean)
.map(
x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
)
.join('\n')
const proc = spawn('pbcopy')
proc.stdin.write(list)
proc.stdin.end()I just load that up in a Quokka buffer and it's just waiting in my clipboard. And here's my config because someone asked me once: {
// Place your settings in this file to overwrite the default settings
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.detectIndentation": true,
"editor.lightbulb.enabled": false,
"editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": false,
"editor.rulers": [80],
"editor.snippetSuggestions": "inline",
"editor.suggest.showKeywords": false,
"editor.wordBasedSuggestions": false,
"editor.suggest.localityBonus": true,
"editor.acceptSuggestionOnCommitCharacter": false,
"enitor.acceptSuggestionOnEnter": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.suggestSelection": "recentlyUsed"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.suggestSelection": "recentlyUsed"
},
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
"editor.glyphMargin": false,
"editor.folding": false,
"files.exclude": {
"**/.env": true,
"USE_GITIGNORE": true
},
"files.associations": {
"*.md": "mdx"
},
"files.defaultLanguage": "{activeEditorLanguage}",
"javascript.validate.enable": false,
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/coverage": true,
"**/dist": true,
"**/build": true,
"**/.build": true,
"**/.gh-pages": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.options": {
"overrideConfig": {
"rules": {
"no-debugger": "off"
}
}
},
"terminal.integrated.shellArgs.osx": ["-l"],
"terminal.integrated.scrollback": 10000,
"explorer.openEditors.visible": 0,
"editor.lineNumbers": "on",
"workbench.colorTheme": "Night Owl",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"workbench.panel.defaultLocation": "right",
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.perEditorGroup": false,
"workbench.editor.limit.value": 10,
"debug.javascript.codelens.npmScripts": "never",
"breadcrumbs.enabled": true,
"local-history.absolute": true,
"local-history.path": "/Users/kentcdodds/.vscode-history",
"grunt.autoDetect": "off",
"npm.runSilent": true,
"gulp.autoDetect": "off",
"explorer.confirmDragAndDrop": false,
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": false,
"editor.minimap.enabled": false,
"spellright.language": ["en"],
"spellright.documentTypes": ["markdown", "plaintext", "mdx"],
"spellright.parserByClass": {
"mdx": {
"parser": "markdown"
}
},
"javascript.updateImportsOnFileMove.enabled": "never",
"typescript.updateImportsOnFileMove.enabled": "never",
"editor.cursorSmoothCaretAnimation": true,
"editor.smoothScrolling": true,
"php.suggest.basic": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.packageManager": "npm",
"npm.packageManager": "npm",
"editor.acceptSuggestionOnEnter": "off",
"editor.tokenColorCustomizations": {
"textMateRules": []
},
"editor.fontSize": 22,
"terminal.integrated.fontSize": 20,
"workbench.statusBar.visible": true,
"editor.cursorBlinking": "solid",
"editor.inlineSuggest.enabled": true,
"redhat.telemetry.enabled": false,
"editor.formatOnSave": true,
"emmet.showAbbreviationSuggestions": false,
"emmet.showExpandedAbbreviation": "never",
"github.copilot.enable": {
"*": true,
"yaml": false,
"plaintext": false,
"markdown": false,
"jsonc": false,
"mdx": true,
"typescriptreact": true
},
"git.autofetch": true,
"timeline.excludeSources": [],
"deno.lint": false,
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma"
},
"git.path": "/opt/homebrew/bin/git",
"playwright.reuseBrowser": true
/**/
// egghead
/*
"editor.fontSize": 20,
"terminal.integrated.fontSize": 15,
"scm.diffDecorations": "none",
"editor.lineNumbers": "off",
"workbench.editor.showTabs": false,
"workbench.statusBar.visible": false,
"editor.cursorBlinking": "solid",
"window.zoomLevel": 1,
"breadcrumbs.enabled": false,
"editor.parameterHints.enabled": false,
"editor.suggestOnTriggerCharacters": false,
"explorer.decorations.colors": false,
"explorer.decorations.badges": false,
"workbench.activityBar.visible": false
/**/
// build react apps
/*
"editor.fontSize": 20,
"terminal.integrated.fontSize": 15,
"scm.diffDecorations": "none",
"workbench.statusBar.visible": false,
"editor.cursorBlinking": "solid",
"window.zoomLevel": -1,
"editor.parameterHints.enabled": false,
"editor.suggestOnTriggerCharacters": false,
"explorer.decorations.colors": false,
"explorer.decorations.badges": false
/**/
// workshop
/*
"editor.fontSize": 16,
"terminal.integrated.fontSize": 16,
"scm.diffDecorations": "none",
"workbench.statusBar.visible": false,
"editor.cursorBlinking": "solid",
"workbench.colorTheme": "Night Owl Light",
"explorer.decorations.colors": false,
"explorer.decorations.badges": false,
"workbench.activityBar.visible": false,
"workbench.editor.limit.value": 100
/**/
// Talk
/*
"editor.fontSize": 22,
"terminal.integrated.fontSize": 20,
"scm.diffDecorations": "none",
"editor.lineNumbers": "off",
"workbench.statusBar.visible": false,
"workbench.activityBar.visible": false,
"editor.cursorBlinking": "solid",
"window.zoomLevel": 2,
"workbench.colorTheme": "Night Owl Light",
"breadcrumbs.filePath": "off",
"breadcrumbs.symbolPath": "off",
"editor.parameterHints.enabled": false,
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
},
"editor.suggestOnTriggerCharacters": false,
"explorer.decorations.colors": false,
"explorer.decorations.badges": false
/**/
}Snippetsjavascript.json/typescript.json/typescriptreact.json (I just copy/paste it...) {
/*
// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
*/
"console.log": {
"prefix": "cl",
"body": "console.log(${1:'here'})$0"
},
"console.log('var', var)": {
"prefix": "vl",
"body": "console.log('$1', $1)$0"
},
"console.log({var})": {
"prefix": "ol",
"body": "console.log({$1})$0"
},
"import x from '": {
"prefix": "imp",
"body": "import ${2:*} from '$1'$3"
},
"eslint rule": {
"prefix": "esl",
"body": ["/*", "eslint", " $1: \"off\",", "*/"]
},
"eslint disable next line": {
"prefix": "eslnl",
"body": "// eslint-disable-next-line $1"
},
"eslint disable line": {
"prefix": "esll",
"body": "// eslint-disable-line $1"
},
"constructor": {
"prefix": "ctor",
"body": ["constructor(...args) {", " super(...args)", " $0", "}"]
},
"try/catch": {
"prefix": "try",
"body": ["try {", " $1", "} catch (error) {", " $0", "}"]
},
"async function": {
"prefix": "afun",
"body": ["async function $1($2) {", " $0", "}"]
},
"throw log": {
"prefix": "tl",
"body": "throw new Error(JSON.stringify({$0}, null, 2))"
},
"spaced console.log": {
"prefix": "scl",
"body": [
"console.log('**************************************************************************\\\\n\\\\n\\\\n')",
"console.log($0)",
"console.log('\\\\n\\\\n\\\\n**************************************************************************')"
]
},
"Switch Statement": {
"prefix": "switch",
"body": [
"switch (${1:key}) {",
" case ${2:value}: {",
" $0",
" break",
" }",
" default: {",
" break",
" }",
"}"
]
},
"Reducer": {
"prefix": "reducer",
"body": [
"function ${1:someReducer}(state, action) {",
" switch (action.type) {",
" case ${2:'value'}: {",
" return $0",
" }",
" default: {",
" throw new Error(`Unhandled action type: ${action.type}`)",
" }",
" }",
"}"
]
},
"Switch case": {
"prefix": "case",
"body": ["case ${2:'value'}: {", " return $0", "}"]
},
"import React": {
"prefix": "ir",
"body": ["import * as React from 'react'\n"]
},
"React.useState": {
"prefix": "us",
"body": [
"const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = React.useState(${2:initial${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}})$0"
]
},
"React.useEffect": {
"prefix": "uf",
"body": ["React.useEffect(() => {", " $0", "}, [])"]
},
"React.useReducer": {
"prefix": "ur",
"body": [
"const [state, dispatch] = React.useReducer(${1:someReducer}, {",
" $0",
"})"
]
},
"React.useRef": {
"prefix": "urf",
"body": ["const ${1:someRef} = React.useRef($2)$0"]
},
"React Component": {
"prefix": "rc",
"body": [
"class $1 extends React.Component {",
" render() {",
" $0",
" }",
"}"
]
},
"React: componentWillMount": {
"prefix": "cwm",
"body": ["componentWillMount() {", " $0", "}"]
},
"React: componentDidMount": {
"prefix": "cdm",
"body": ["componentDidMount() {", " $0", "}"]
},
"React: componentWillReceiveProps": {
"prefix": "cwrp",
"body": ["componentWillReceiveProps(nextProps) {", " $0", "}"]
},
"React: componentWillUpdate": {
"prefix": "cwu",
"body": ["componentWillUpdate(nextProps, nextState) {", " $0", "}"]
},
"React: componentDidUpdate": {
"prefix": "cdu",
"body": ["componentDidUpdate(prevProps, prevState) {", " $0", "}"]
},
"React: componentWillUnmount": {
"prefix": "cwu",
"body": ["componentWillUnmount() {", " $0", "}"]
},
"Jest test": {
"prefix": "test",
"body": ["test('$1', () => {", " $0", "})"]
},
"Jest async test": {
"prefix": "atest",
"body": ["test('$1', async () => {", " $0", "})"]
},
"Mocha it block": {
"prefix": "it",
"body": ["it('$1', () => {", " $2", "})"]
},
"Mocha describe block": {
"prefix": "desc",
"body": ["describe('$1', () => {", " $2", "})"]
},
"split-guide final": {
"prefix": "sgf",
"body": ["// FINAL_START", "$1", "// FINAL_END"]
},
"split-guide workshop": {
"prefix": "sgw",
"body": ["// WORKSHOP_START", "$1", "// WORKSHOP_END"]
},
"split-guide comment": {
"prefix": "sgc",
"body": ["// COMMENT_START", "$1", "// COMMENT_END"]
}
}remix.code-snippets {
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Remix Loader": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmxLoader",
"body": [
"import type { LoaderArgs } from \"@remix-run/node\"",
"import { json } from \"@remix-run/node\"",
"import { useLoaderData } from \"@remix-run/react\"",
"",
"export async function loader({request}: LoaderArgs) {",
" return json({});",
"};",
""
]
},
"Remix Action": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmxAction",
"body": [
"import type { ActionArgs } from \"@remix-run/node\"",
"import { redirect, json } from \"@remix-run/node\"",
"import { useActionData } from \"@remix-run/react\"",
"",
"export async function action({request}: ActionArgs) {",
" const formData = await request.formData();",
" $0",
"};",
""
]
},
"Remix Route Component": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmxComponent",
"body": [
"export default function $0() {",
" const data = useLoaderData<typeof loader>();",
"",
" return null;",
"}"
]
},
"Remix CatchBoundary": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmxCatchBoundary",
"body": [
"export function CatchBoundary() {",
" const caught = useCatch();",
"",
" if (caught.status === 404) {",
" return (",
" <div>",
" Not found",
" </div>",
" );",
" }",
"",
" throw new Error(`Unexpected caught response with status: ${caught.status}`);",
"}"
]
},
"Remix ErrorBoundary": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmxErrorBoundary",
"body": [
"export function ErrorBoundary({ error }: { error: Error }) {",
" console.error(error);",
"",
" return (",
" <div>",
" An unexpected error occurred: {error.message}",
" </div>",
" );",
"}"
]
}
}keybindings.json [
{
"comment": "This is just really handy. I use it all the time in Atom.",
"key": "shift+cmd+\\",
"command": "workbench.files.action.focusFilesExplorer"
},
{
"comment": "Because I want enter to open the file, I need some way to rename it, this seemed as good as any other method. 'm' for 'move'",
"key": "m",
"command": "renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
},
{
"comment": "This allows me to open the file on enter instead which makes more sense to me.",
"key": "enter",
"command": "-renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
},
{
"comment": "This makes my zoom behavior more like chrome",
"key": "cmd+0",
"command": "workbench.action.zoomReset"
},
{
"comment": "This disables the enter key for autocomplete. Use tab instead. It's annoying when I'm typing quickly and want to go to the next line but have to first clear the autocomplete menu. So I just disabled the enter key here.",
"key": "enter",
"command": "-acceptSelectedSuggestionOnEnter",
"when": "acceptSuggestionOnEnter && suggestWidgetVisible && suggestionMakesTextEdit && textInputFocus"
},
{
"comment": "This disables the tab key for autocomplete. Instead we have another one which only applies when not in snippet mode.",
"key": "tab",
"command": "-acceptSelectedSuggestion",
"when": "suggestWidgetVisible && textInputFocus"
},
{
"key": "tab",
"command": "acceptSelectedSuggestion",
"when": "suggestWidgetVisible && textInputFocus && !editorTabMovesFocus && !inSnippetMode"
},
{
"key": "shift+cmd+space",
"command": "editor.action.triggerParameterHints",
"when": "editorHasSignatureHelpProvider && editorTextFocus"
},
{
"key": "shift+cmd+space",
"command": "-editor.action.triggerParameterHints",
"when": "editorHasSignatureHelpProvider && editorTextFocus"
},
{
"key": "cmd+a",
"command": "explorer.newFile",
"when": "filesExplorerFocus && !inputFocus"
},
{
"key": "shift+cmd+a",
"command": "explorer.newFolder",
"when": "filesExplorerFocus && !inputFocus"
},
{
"key": "ctrl+w",
"command": "expand_region",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+w",
"command": "undo_expand_region",
"when": "editorTextFocus && editorHasSelection"
},
{
"key": "cmd+shift+d",
"when": "editorTextFocus",
"command": "-editor.action.copyLinesDownAction"
}
] |
|
Hey @kentcdodds nice list :) Hope this is ok I wrote something here :) You should check this one out https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync This let you have your setting in a private gist and when you change machine etc you get all back :) |
|
Hi @kentcdodds,
This extension is no longer required, as a You can open Keyboard Shortcuts |
|
If you have multiple computers you would want to sync vs code settings https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync ES6/ES7 syntax coloring https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring To colorize brackets https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer React code snippets https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets Take pretty code screenshots to share on Twitter https://marketplace.visualstudio.com/items?itemName=pnp.polacode |
|
Replace
With
|
|
@sagirk Thanks, I will try it |
detrohutt
added
the
packages
|
Hey @kentcdodds, just seeing this now. Awesome that you're using my vscode-language-babel package. Let me know if you (or anyone else on this thread) run into any issues with it! |
This one extension is a game changer for console.log
|
|
To generate this list on Windows (copies list to clipboard) const {execSync, spawn} = require('child_process')
const result = execSync('code --list-extensions')
const list = String(result)
.split('\n')
.filter(Boolean)
.map(
x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
)
.join('\n')
const proc = spawn('clip')
proc.stdin.write(list)
proc.stdin.end() |
|
I have been looking for this. Can you please help me with some light on whats is going on under the hood. |
|
@kentcdodds and about this...
|
|
@Ridermansb It looks like he's using Rocket: |
|
@kentcdodds Can you share the vscode snippet you used in your remote workshop for useReducer? |
|
Hi @tjshipe! Updated |
|
@kentcdodds instead of using comments in VS Code settings.json, you can actually create multiple workspaces and have workspace specific settings.json |
|
That requires the settings be inside the project right? The thing is that sometimes when I'm in the project I want it to have my livestream settings (like when I'm livestreaming) and other times I want it to have my normal settings. |
|
No, its doesn't require you to have settings inside the project. You can add/remove folders from a workspace. Once you create a workspace (file format: .code-workspace) and keep the workspace file in which ever folder you want on your system. You can then go to workspace settings by "Preferences: Open Workspace Settings" |
|
Oh, I see. Thanks for letting me know. I think I'll stick with my current workflow because I think it's a bit faster/easier :) Thanks though! |
|
Hi there, in this article [https://kentcdodds.com/blog/react-hooks-pitfalls] what theme are you using for the code snippets ? thank you ? |
|
It's inspired by the Night Owl theme. |
Do you mind sharing it? |
|
It's open source: https://npm.im/prism-react-renderer It's one of the baked in themes |
|
Hi Kent, what are you using for in-line styled component syntax highlighting? |
|
@kentcdodds What is the test explorer window you that you're using in your egghead.io videos? Edit: Oh nevermind. It's CodeSandbox, not VS Code. |
|
@DatXN vscode-language-babel supports inline styled components syntax highlighting |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
kentcdodds commentedMay 24, 2018
Yes, this is me asking myself a question, because I want to answer it and I'm sure someone will ask me eventually.
I'll try to keep my answer up-to-date. You can get to this question quickly with the short-link: http://kcd.im/vscode
The text was updated successfully, but these errors were encountered: