Folder templates / file and code templates for VS Code and Webstorm

VScode - Folder templates

folder templates extension

Webstorm - File and Code Templates

templates with multiple files

• Opprett template files. Én hovedfil med noen sub-files

Create main file

Name: component folder
Extension: tsx
File name: $NAME/$NAME

import React from 'react';
import classes from './${NAME}.module.css';

interface ${NAME}Props {

}

export const ${NAME} = ({  }: ${NAME}Props) => {
  return (
    <div className={classes.root}>
      
    </div>
    )
};

Create a child template file

File name: $NAME/index
Extension: ts

export {${NAME}} from './${NAME}';

And a css file

File name: ${NAME}/${NAME}.module
Extension: css

.root {

}

Stygg error med nested template files: Navn forsvinner helt uten videre!!

Issue: https://youtrack.jetbrains.com/issue/IDEA-279811/File-template-file-name-is-removed

Folder icons structure

📂my-component-library
+┣━ 📂lib
+┃ ┗━ 📜main.ts
┣ 📂public
┣ 📂src
…

Generate CSS module classnames in Vite

import { defineConfig } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    modules: {
      generateScopedName: (name, filename) => {
        const f = filename.split("?")[0].split(".")[0];
        const file = path.basename(f);
        return `${file}_${name}`;
      }
    }
  },
});

Open Webstorm from terminal (Windows + WSL & Mac)

WSL

.bashrc

webstorm()
{
     # /mnt/c/Program\ Files/JetBrains/WebStorm\ 2022.1.2/bin/webstorm64.exe "$1" > /dev/null 2>&1 &!
     /mnt/c/Program\ Files/JetBrains/WebStorm\ 2023.2.5/bin/webstorm64.exe .
}

Usage: Run webstorm in terminal

Mac

.zshrc

webstorm() {
#   open "/Applications/WebStorm.app" .
    open -na "WebStorm.app" --args "$@"
}

Usage: Run webstorm . in terminal

Docs WSL & Mac

https://www.jetbrains.com/help/webstorm/working-with-the-ide-features-from-command-line.html

List & kill processes

List processes

related

• find program that uses port: https://useful-snippets.netlify.app/posts/finne-prog-med-port/

All

sudo netstat -nlp | grep tcp

Sudo gives more info on process id & stuff

One specific port

sudo lsof -i:3000

sudo lsof -i:80
sudo lsof -i:443
sudo lsof -i:4173

Kill process

By name

killall -9 node

sudo killall -9 caddy related: https://useful-snippets.netlify.app/posts/quit-caddy-process/
sudo killall -9 http-server

By PID

eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
__________________________________^^______

killall -9 1686

By port

eg: tcp6 0 0 :::3000 :::* LISTEN 1686/node
________________^^________________________

sudo killall $(lsof -t -i:3000)

Eller med

fuser -k 3000/tcp

IDE bruker ikke prettierrc

Prøv å kjøre npx prettier filenamepath --writefør du formatterer i webstorm/VSCode

Webstorm sin VSCode Gitlens compare working dir with branch

View > Appearance > show status bar
View > show status bar widgets > BRANCH
ÅPNE MENY NEDE TIL HØYRE > Velg branch du vil sammenligne med

Tech pronunciation

• Sql (S Q L / Sequel / Squeel )
• xampp (Shamp)
• Zsh (Zash)
• C# (See sharp, see hash)
• LaTeX (Lateck)
• Vite (French word for "quick", pronounced /vit/, like "veet")
• Deno ("Dino", ikke "Deno")
• JWTs (JSON Web Token, pronounced 'jot')
• Lua (pronounced LOO-ah)
• RKT (pronounced like a "rocket")

disable eslint prettier

.eslintrc

"prettier/prettier": 0,

nyttig for webstorm

Debug

In Python

raise ValueError("custom message")

• https://stackoverflow.com/questions/2052390/manually-raising-throwing-an-exception-in-python
• https://stackoverflow.com/questions/1156023/print-current-call-stack-from-a-method-in-code

In PyCharm

Top right drop-down menu:

Edit configurations

python interpreter:

<python environment=""></python>

place breakpoint (not in the template, click the left border)

--OK--

Debug 'name' (F5) (At least with VS Code keymap)

search for text appearance in a file's git history

Eg. Search for "use-query-params" in package.json's git history

git grep use-query-params $(git rev-list --all -- package.json) -- package.json

As a function in .bashrc/.zshrc-file

# search for word in a file's git history
# usage: filehistorysearch "use-query-params" package.json

filehistorysearch() {
  git grep $1 $(git rev-list --all -- $2) -- $2
}

graphql fetch using multiple IDs

fetch all related products from a list of products, and get results merged into one response!

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: [String!]) {
        products(filter: { url: { in: $url } }) {
            items {

            }
        }
    }
`

fetching just one product's related products

const GET_RELATED_PRODUCTS = `
    query getRelatedProducts($url: String!) {
        products(filter: { url: { eq: $url } }) {
            items {

            }
        }
    }
`