Skip to content

Instantly share code, notes, and snippets.

@shawn-sandy
Last active September 22, 2022 20:14
Show Gist options
  • Save shawn-sandy/137ade88316323150e08878d2ef54d08 to your computer and use it in GitHub Desktop.
Save shawn-sandy/137ade88316323150e08878d2ef54d08 to your computer and use it in GitHub Desktop.
Husky setup files
node_modules
package-lock.json
# Cache
.npm
.cache
.eslintcache
# ignore built packages
dist
esm
public
generated
*.min.js
# Coverage
coverage
# Output of 'npm pack'
*.tgz
# Mac files
.DS_Store
# Logs
logs
*.log
*.hbs
**/node_modules/**
**/build/**
**/coverage/**
**/docs/**
**/dist/**
/plopfile.js
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"standard",
"plugin:react/recommended",
"@azimutlabs/eslint-config-jsx-a11y",
"eslint:recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "jsx-a11y"],
"rules": {
"jsx-quotes": ["error", "prefer-single"]
}
}
{
"extends": [
"accessibility"
]
}
module.exports = {
extends: 'lighthouse:default',
settings: {
throttlingMethod: 'devtools',
onlyCategories: ['performance'],
},
};
package.json
package-lock.json
yarn.lock
dist
node_modules
**/node_modules/**
{
"bracketSpacing": true,
"semi": false,
"trailingComma": "none",
"printWidth": 60,
"endOfLine": "lf",
"tabWidth": 2
}
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-scss"],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
}
}
# {{name}}
{{description}}
{{#if toppings}}
on my pizza I like
{{wordJoin toppings}}
{{else}}
I don't like any toppings on my pizza (not human)
{{/if}}
Generated by {{pkg 'name'}} v{{pkg 'version'}}
<script src="https://cdn.jsdelivr.net/npm/@khanacademy/tota11y@0.2.0/dist/tota11y.min.js"></script>
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
const Configuration = {
/*
* Resolve and load @commitlint/config-conventional from node_modules.
* Referenced packages must be installed
*/
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', ['feat', 'fix', 'perf', 'refactor', 'ci', 'chore', 'docs', 'revert', 'style']]
},
/*
* Custom URL to show upon failure
*/
helpUrl:
'https://github.com/conventional-changelog/commitlint/#what-is-commitlint'
}
module.exports = Configuration
// commitlint.types.js, will be picked up by commitlint.config.js
module.exports = {
'type-enum': [
0,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'test',
'ci',
'chore',
'revert'
]
]
}
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {}
},
"lint-staged": {
"*.js": "eslint --fix",
"*.{scss, css}": "stylelint --fix"
}

Husky setup files

Husky

Modern native git hooks made easy More Info

Install Husky

 npx husky-init && npm install

It will setup husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run npm test when you commit.

Commit Lint

Commit lint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy. more info

Install commitlint globally

npm install -g @commitlint/cli @commitlint/config-conventional
npm install @commitlint/cli @commitlint/config-conventional

Copy the code below to your commitlint.config.js

const Configuration = {
  /*
   * Resolve and load @commitlint/config-conventional from node_modules.
   * Referenced packages must be installed
   */
  extends: ['@commitlint/config-conventional'],

  /*
   * Custom URL to show upon failure
   */
  helpUrl:
    'https://github.com/conventional-changelog/commitlint/#what-is-commitlint',
  /*
   * Custom prompt configs
   */
  prompt: {
    messages: {},
    questions: {
      type: {
        description: 'please input type:'
      }
    }
  }
}

module.exports = Configuration

PRETTY QUICK

Runs Prettier on your changed files more info.

Install

npm install --save-dev prettier pretty-quick

Add this code to you .husky/precommit file

echo 'Starting prettier...'
npx pretty-quick --staged

LINT STAGED

Run linters against staged git files and don't let 💩 slip into your code base! more info

Install ``bash npm install -D lint-staged

`

`

`

`


Add the following to your `.husky/precommit` file

```bash
# lint-stages
echo 'Starting eslint...'
npx lint-staged "$1"

ESLINT setup

Intall ESLint

npm install eslint --save-dev

Create an eslint config file

Use the eslint config interactive command tool

npx eslint --init

or create using the following

`

`

`

`

```json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["standard"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "script"
  },
  "rules": {},
  "ignorePatterns": ["temp.js", "**/vendor/*.js", "**/node_modules/*.js"]
}

Create a .eslintignore file in your project root

node_modules
package-lock.json

# Cache
.npm
.cache
.eslintcache

# ignore built packages
dist
esm
public
generated
*.min.js

# Coverage
coverage

# Output of 'npm pack'
*.tgz

# Mac files
.DS_Store

# Logs
logs
*.log

*.hbs
**/node_modules/**
**/build/**
**/coverage/**
**/docs/**
**/dist/**

STYLELINT

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. more info

Install

npm install --save-dev stylelint stylelint-config-standard

Create a .stylelintrc.json configuration file in the root of your project with the following content:

{
  "extends": "stylelint-config-standard"
}

Update you package.json

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {}
  },
  "lint-staged": {
    "*.js": "eslint --fix",
    "*.{scss, css}": "stylelint --fix"
  }

GIST

You can get all the files from on gist (updated) open

Complete Husky pre-commit file

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# npm test
echo 'Starting prettier...'
npx pretty-quick --staged "$1"

# lint-stages
echo 'Starting eslint...'
npx lint-staged "$1"

# commitizen
echo 'Starting commitlint...'
npx --no -- commitlint --edit "$1"

# If everything passes... Now we can commit
echo '✅✅✅✅ Excellent all test passed, I am committing this now...'

# ignore built packages
dist
esm
public
generated
*.min.js

# Coverage
coverage

# Output of 'npm pack'
*.tgz

# Mac files
.DS_Store

# Logs
logs
*.log

*.hbs
**/node_modules/**
**/build/**
**/coverage/**
**/docs/**
**/dist/**

STYLELINT

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. more info

Install

npm install --save-dev stylelint stylelint-config-standard

Create a .stylelintrc.json configuration file in the root of your project with the following content:

{
  "extends": "stylelint-config-standard"
}

WEBHINT

webhint helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors. more info

Install

npm i -D hint

Create a hintrc

run npx create hintrc to create a hintrc file

Add a .hintrc file to you project root

{
  "extends": ["accessibility"]
}

Update you package.json

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {}
  },
  "lint-staged": {
    "*.js": "eslint --fix",
    "*.{scss, css}": "stylelint --fix"
  }

HUSKY PRE-COMMIT

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# npm test
echo 'Starting prettier...'
npx pretty-quick --staged "$1"

# lint-stages
echo 'Starting eslint...'
npx lint-staged "$1"

# commitizen
echo 'Starting commitlint...'
npx --no -- commitlint --edit "$1"

# If everything passes... Now we can commit
echo '✅✅✅✅ Excellent all test passed, I am committing this now...'

GIST

You can get all the files from on gist (updated) open

RESOURCES

Conventional Commits

The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages more info.

The commit message should be structured as follows:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Commit Message editor

A VS code extension that allows to write quickly write standard conventional commit messages Download

Tips

Commit lint has an error from current or previous commit

  • Open the .git/COMMIT_EDITMSG file and remove all content.
  • Create a new commit with the --amend option
<script src="https://cdn.jsdelivr.net/npm/@khanacademy/tota11y@0.2.0/dist/tota11y.min.js"></script>
{
"name": "ideas",
"version": "0.0.1",
"private": true,
"description": "A UI toolkit for creating and managing style-guides, design systems, pattern libraries, apps, digital products, etc.",
"scripts": {
"test": "echo \"Error: no test specified\"",
"start": "run-s clean && run-p watch:* js:* serve",
"serve": "eleventy --serve",
"eleventy": "run-s eleventy --serve",
"build": "npx @11ty/eleventy",
"builds": "run-s build:*",
"watch:root-scss": "sass styles/ideas-ui-kit.scss styles/css/ui-kit.css --load-path=node_modules --watch",
"watch:scss": "sass --style compressed labs/scss:labs/css/. --load-path=node_modules --watch",
"build:scss": "sass --style compressed labs/scss:labs/css/. --load-path=node_modules",
"changelog": "auto-changelog -p --template config/_changelog.hbs",
"debug": "cd system/debug",
"tokens": "style-dictionary build --config ./tokens.js",
"lodash": "run-s lodash:*",
"lodash:collection": "lodash include=forEach,size,orderBy -o system/js/lodash/collection.js -m",
"lodash:array": "lodash include=chunk,size -o system/js/lodash/array.js -m",
"lodash:function": "lodash include=debounce,throttle -o system/js/lodash/function.js -m",
"clean": "trash www/**/*.*",
"audit": "lighthouse https://shawnsandy.com/ --output=json --output-path=./audits/report.json --config-path=.lighthouseconfig.js",
"ideas": "lerna exec npm start --scope=@shawnsandy/ideas",
"first-paint": "lerna exec npm start --scope=@shawnsandy/first-paint",
"build:first-paint": "lerna exec npm run build --scope=@shawnsandy/first-paint",
"build:code-clipper": "lerna exec npm run build --scope=@shawnsandy/code-clipper",
"publish-beta": "run-s build:* && lerna publish --dist-tag beta",
"publish-next": "run-s build:* && lerna publish --dist-tag next",
"labs": "babel labs/js/ -d labs/js/min --minified --out-file-extension .min.js --ignore ./**/min/",
"js:main": "babel main.js -d js/min --out-file-extension .min.js --minified --ignore ./**/min/ --source-maps --watch",
"js:labs": "babel labs/js -d labs/js/min --out-file-extension .min.js --minified --ignore ./**/min/ --source-maps --watch",
"watch-js": "run-s js:*",
"git:add": "git add .",
"git:cz": "git cz",
"git:push": "git push",
"commit": "run-s git:add git:cz git:push",
"prepare": "husky install",
"plop": "plop",
"eslint": "eslint '**/src/**/*.jsx'",
"pre-commit": "eslint '**/src/**/*.jsx'"
},
"directories": {
"lib": "dist",
"gulp": "gulp",
"test": "__tests__"
},
"files": [
"lib",
"gulp"
],
"auto-changelog": {
"unreleased": true,
"template": "config/_changelog.hbs"
},
"main": "index.js",
"repository": "https://github.com/shawn-sandy/idea.git",
"author": "shawnsandy <shawnsandy04@gmail.com>",
"license": "MIT",
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-cache-assets": "^2.3.0",
"@11ty/eleventy-navigation": "^0.3.2",
"@11ty/eleventy-plugin-rss": "^1.1.1",
"@azimutlabs/eslint-config-jsx-a11y": "^1.1.1",
"@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@commitlint/cli": "^15.0.0",
"@commitlint/config-conventional": "^15.0.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@hint/configuration-accessibility": "^2.0.15",
"@shawnsandy/bootstrap-lite": "^0.2.6",
"@shawnsandy/first-paint": "^1.2.1",
"@shawnsandy/ideas": "^0.3.2",
"@shawnsandy/mix": "^0.10.21",
"auto-changelog": "^2.3.0",
"conventional-changelog-atom": "^2.0.8",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^7.17.0",
"flat-cache": "^3.0.4",
"fs-extra": "^10.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-print": "^5.0.2",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-shell": "^0.8.0",
"gulp-sizereport": "^1.2.1",
"gulp-string-replace": "^1.1.2",
"hint": "^6.1.9",
"html-minifier": "^4.0.0",
"husky": "^7.0.0",
"lerna": "^4.0.0",
"lerna-script": "^1.4.0",
"lighthouse": "^7.4.0",
"lint-staged": "^12.1.2",
"lodash": "^4.17.21",
"mvp": "git+https://github.com/shawn-sandy/mvp.git",
"node-fetch": "^2.6.5",
"npm-run-all": "^4.1.5",
"parcel": "^2.0.1",
"plop": "^3.0.4",
"prettier": "^2.5.1",
"pretty-quick": "^3.1.2",
"require-dir": "^1.2.0",
"sass": "^1.35.1",
"standard": "^16.0.3",
"style-dictionary": "^3.0.1",
"stylelint": "^14.1.0",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.0.1",
"trash-cli": "^4.0.0"
},
"lint-staged": {
"**/.*.{js,ts,jsx}": "eslint --fix",
"**/.*.{js,jsx,ts,tsx,md,html,scss,json,md}": "prettier --write"
}
}
export default function (plop) {
// create your generators here
plop.setGenerator('basics', {
description: 'this is a skeleton plopfile',
prompts: [
{
type: 'input',
name: 'name of the component'
}
], // array of inquirer prompts
actions: [] // array of actions
})
plop.setGenerator('readme', {
description: 'create a readme',
prompts: [
{
type: 'input',
name: 'name',
message: 'Readme name please'
},
{
type: 'input',
name: 'description',
message: 'Readme description please'
}
],
actions: [
{
type: 'add',
path: '{{constantCase name}}.md',
templateFile: 'plop-templates/readme.hbs'
}
]
})
}
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# npm test
# echo 'Starting prettier...'
# npx pretty-quick --staged "$1"
# lint-staged
echo 'Starting lint-staged...'
npx lint-staged "$1"
# commitizen
echo 'Starting commitlint...'
npx --no -- commitlint --edit "$1"
# If everything passes... Now we can commit
echo '✅✅✅✅ Excellent all test passed, I am committing this now.'
{
"files.associations": {
"*.tag": "html",
"*.cshtml": "html",
"*.html": "html",
"*.mustache": "html",
"*.html.md": "html"
},
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/.vscode": true,
"**/__pycache__": true,
"**/.pytest_cache": true,
"**/node_modules": true,
"node_modules": true,
"venv": true,
"*.sublime-*": true,
"env*": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/env": true,
"**/venv": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/env/**": true,
"**/venv/**": true,
"env-*": true
},
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"editor.cursorBlinking": "phase",
"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}",
"editor.formatOnSave": true,
"breadcrumbs.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always",
"xd.lastPackage": "/c:/Users/shawn/devbox/ideas/dsp-kit",
"xd.globalEditor": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"conventionalCommits.scopes": ["2.0", "wip"],
"cssVariables.lookupFiles": ["projects/first-paint/src/v2"],
"conventionalCommits.lineBreak": "\\",
"prettier.semi": false,
"javascript.format.semicolons": "remove",
"typescript.format.semicolons": "remove",
"markdownlint.config": {
"MD028": false,
"MD025": {
"front_matter_title": ""
}
},
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"markdown.replaceSmartQuotes": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment