Unify linting across websites repos (#173)

* Copy new lint configs from dvc.org

* Remove outdated workflow file and add concurrency to new one

* Add new lint config and fix stylelint issues

* Run fix-all

* Comment out unused tests from workflow

* Upgrade ESLint and Stylelint, remove deprecated stylelint-config-prettier

* Run fix-all

* Remove options from restyled config

* Update commands and lint-staged

* Add explicit prettier config argument to restyled

* Run prettier on yml

* Remove commented steps

Author: rogermparent

.eslintrc.json

@@ -2,10 +2,10 @@
   "extends": [
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
     "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
-    "plugin:json/recommended"
+    "plugin:json/recommended",
+    "prettier"
   ],
   "plugins": ["@typescript-eslint"],
   "parser": "@typescript-eslint/parser",
@@ -37,23 +37,18 @@
         "leadingUnderscore": "allow"
       }
     ],
-    "no-tabs": "error",
+    "no-tabs": [
+      "error",
+      {
+        "allowIndentationTabs": true
+      }
+    ],
     "react/prop-types": "off",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-var-requires": "off"
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "overrides": [
     {
-      "files": [
-        "src/utils/shared/*.?(js|ts)",
-        "src/gatsby/**/*.js",
-        "scripts/**/*.js",
-        "config/**/*.js",
-        "src/server/**/*.js",
-        "plugins/**/*.js",
-        "gatsby-*.js",
-        "postcss.config.js"
-      ],
+      "files": "**/*.js",
       "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/explicit-function-return-type": "off"

.github/workflows/lint-and-test.yml

@@ -0,0 +1,38 @@
+name: 'Linting and Testing'
+
+on: pull_request
+
+concurrency:
+  group: lint-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  run-tests:
+    name: 'Run Tests'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js and use yarn
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+
+      - name: Install All Dependencies
+        run: yarn
+
+      - name: Check Formatting with Prettier
+        run: yarn format-check-all
+
+      - name: Lint JS with ESLint
+        run: yarn lint
+
+      - name: Lint CSS with Stylelint
+        run: yarn lint-css
+
+      - name: Check TypeScript compilation
+        run: yarn lint-ts

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+yarn exec lint-staged

.husky/pre-commit

@@ -6,13 +6,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "none",
-  "useTabs": false,
-  "overrides": [
-    {
-      "files": "*.css",
-      "options": {
-        "singleQuote": false
-      }
-    }
-  ]
+  "useTabs": false
 }

.prettierrc

@@ -0,0 +1,14 @@
+restylers:
+  - name: prettier
+    arguments: ['--config=./.prettierrc', '--ignore-path=./.prettierignore']
+    include:
+      - '**/*.css'
+      - '**/*.js'
+      - '**/*.json'
+      - '**/*.jsx'
+      - '**/*.md'
+      - '**/*.mdx'
+      - '**/*.ts'
+      - '**/*.tsx'
+      - '**/*.yaml'
+      - '**/*.yml'

.restyled.yaml

@@ -1,10 +1,8 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": ["stylelint-config-standard"],
   "rules": {
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
-    "declaration-colon-newline-after": null,
-    "value-list-comma-newline-after": null,
     "property-no-unknown": [
       true,
       {
@@ -20,10 +18,18 @@
     "at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["mixin"]
+        "ignoreAtRules": ["mixin", "tailwind", "screen"]
       }
     ],
+    "custom-property-pattern": null,
+    "selector-id-pattern": null,
     "selector-class-pattern": null,
-    "keyframes-name-pattern": null
+    "keyframes-name-pattern": null,
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": ["a", "color-mod"]
+      }
+    ]
   }
 }

.stylelintrc

@@ -1,7 +1,6 @@
 module.exports = {
-  '*.ts?(x)': () => 'tsc --noEmit --skipLibCheck',
-  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint'],
-  '*.md': 'prettier --write',
-  '*.json': 'prettier --write',
-  '*.css': 'prettier --write'
+  '*.ts?(x)': () => 'yarn lint-ts',
+  '*.{json,md,mdx,yml,yaml}': 'prettier --write',
+  '*.css': ['prettier --write', 'stylelint --fix'],
+  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix']
 }

lint-staged.config.js

@@ -5,12 +5,15 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "format-staged": "pretty-quick --staged --no-restage --bail --pattern '**/*.{js,jsx,md,tsx,ts,json}'",
-    "format-check": "prettier --check '**/*.{js,jsx,md,tsx,ts,json,css}'",
-    "format-all": "prettier --write '**/*.{js,jsx,md,tsx,ts,json,css}'",
     "format": "prettier --write",
-    "lint-ts": "tsc --noEmit --skipLibCheck && eslint --ext .json,.js,.ts,.tsx .",
-    "lint-css": "stylelint \"**/src/**/*.css\"",
+    "format-check-all": "prettier --check \"**/*.{js,jsx,md,tsx,ts,json,css,yml,yaml}\"",
+    "format-all": "prettier --write \"**/*.{js,jsx,md,tsx,ts,json,css,yml,yaml}\"",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx,json}\"",
+    "lint-fix": "eslint --fix \"**/*.{js,jsx,ts,tsx,json}\"",
+    "lint-css": "stylelint \"packages/*/src/**/*.css\"",
+    "lint-css-fix": "stylelint --fix \"packages/*/src/**/*.css\"",
+    "lint-ts": "tsc --noEmit --skipLibCheck",
+    "fix-all": "yarn format-all && yarn lint-fix && yarn lint-css-fix && yarn lint-ts",
     "clean": "yarn workspace example clean",
     "build": "yarn workspace example build",
     "serve": "yarn workspace example serve",
@@ -24,7 +27,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "@typescript-eslint/parser": "5.51.0",
-    "eslint": "8.33.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
@@ -34,7 +37,7 @@
     "husky": "8.0.3",
     "lint-staged": "13.1.1",
     "prettier": "2.8.4",
-    "stylelint": "14.16.1",
-    "stylelint-config-standard": "29.0.0"
+    "stylelint": "^15.1.0",
+    "stylelint-config-standard": "30.0.1"
   }
 }

package.json

@@ -37,13 +37,6 @@ module.exports = ({
   sentry = defaults.sentry
 }) => ({
   plugins: [
-    {
-      resolve: `gatsby-plugin-typescript`,
-      options: {
-        isTSX: true,
-        allExtensions: true
-      }
-    },
     {
       resolve: 'gatsby-plugin-postcss',
       options: {