natterstefan

Lint-Staged - lint only staged files with eslint and stylelint

Based on the solution created by luuuis, I added two npm scripts lint-css-staged and lint-js-staged. They both lint (with ESLint and stylelint) only staged files.

You could also use pre-commit.sh from luuuis, if you do not want to put this into your package.json.

Prettier provides an example as well.

natterstefan

import React from 'react'
import { mount } from 'enzyme'

describe('Foo', () => {

  it('enzyme should mount object refs', () => {
    // inspired by:
    // - https://stackoverflow.com/a/55292957/1238150
    // - https://github.com/styled-components/styled-components/blob/e6f1b85726512cde163dd5fcdd7fb0f2439d4a09/packages/styled-components/src/test/basic.test.js
    // - https://github.com/styled-components/styled-components/blob/e6f1b85726512cde163dd5fcdd7fb0f2439d4a09/packages/styled-components/src/hoc/withTheme.js

natterstefan

#!/bin/bash
# gdrive client: https://github.com/gdrive-org/gdrive
# inspired by https://github.com/gdrive-org/gdrive/issues/205#issuecomment-423759052

# Create directory ~/backups (must be empty at the beginning)
rm -rf ~/backups && mkdir ~/backups

# upload it the first time into a parent directory
# 1234 => id of the parent directory on google drive
# eg. https://drive.google.com/drive/u/0/folders/1234

natterstefan

#!/bin/bash

# create backup folders (if they do not exist yet)
mkdir -p ~/backups
mkdir -p ~/backups/unifi
mkdir -p ~/backups/pihole

# backup pi-hole
(cd ~/backups/pihole && pihole -a teleporter)

natterstefan

#!/bin/bash

# im ersten Schritt laden wir gdrive herunter (den Download-Link
# Link habe ich von hier: https://github.com/gdrive-org/gdrive#downloads)
$ wget https://drive.google.com/uc?id=1f5Q-yAwUYZYt_frYjodFHbU0v7ppQkem&export=download

# wir ändern den Namen der Datei
$ mv uc\?id\=1f5Q-yAwUYZYt_frYjodFHbU0v7ppQkem gdrive

# nun machen wir die Datei ausführbar

natterstefan

<h1>Hello World</h1>

natterstefan

VSCode | Debug tests in Create-React-App (all or single file)

Add launch.json into the .vscode folder.

Now, enter the Debug view. Either add debugger into one of the tests or add breakpoints, before you execute one of the scripts.

natterstefan

Infer Types from PropTypes

Result

Limitations

natterstefan

[
  {
    "key": "shift+cmd+j",
    "command": "workbench.action.increaseViewSize",
  },
  {
    "key": "shift+cmd+k",
    "command": "workbench.action.decreaseViewSize",
  },
]

natterstefan

Jest - mock useState

When using import React, { useState } from 'react' in your components, this is how you can mock useState with jest.