TypeScript + React + Tailwind + VS Code Project settings

.editorconfig

root = false

[**/**.{yml,ts,tsx,js,json,jsx,html}]
indent_style = space
indent_size = 2
insert_final_newline = true

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  env: {
    node: true,
    mocha: true,
    es6: true
  },
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  }
}

.nvmrc

14

.prettierrc.js

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  quoteProps: 'as-needed',
  trailingComma: 'none',
  bracketSpacing: true,
  semi: false,
  useTabs: false,
  jsxBracketSameLine: false,
  proseWrap: 'never'
}

App.css

@tailwind base;
@tailwind components;
@tailwind utilities;

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

install.sh

#!/usr/bin/env bash

# Usage: ./install.sh <TARGET_PATH> (without trailing /)
TARGET=$1
echo "Installing files to ${TARGET}"
read -p "Are you sure? " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
  echo "OK"
  cp .editorconfig .eslintrc.js .prettierrc.js .nvmrc commitlint.config.js postcss.config.js tailwind.config.js "${TARGET}"
  cp App.css "${TARGET}/src/"
  mkdir "${TARGET}/.vscode" && cp settings.json "${TARGET}/.vscode/"
  cd "${TARGET}"
  yarn add --dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier prettier eslint-watch @commitlint/cli @commitlint/config-conventional @types/node@14 jest @types/jest tailwindcss@latest @tailwindcss/forms postcss@latest autoprefixer@latest
  git ignore node,jetbrains+all,visualstudiocode,macos >>.gitignore
  npx husky-init && yarn
  rm .husky/pre-commit
  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
fi

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

settings.json

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
   "[typescriptreact]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  plugins: [require('@tailwindcss/forms')],
  variants: {
    extend: {
      opacity: ['disabled']
    }
  }
}