Merge pull request #48 from KotlinFoundation/KTL-1241-lint

KTL-1241 chore: added eslint&prettier, run them on pre-commit

Author: zoobestik

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+public
+*.css.d.ts

.eslintrc.js

@@ -0,0 +1,47 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'react-hooks'],
+  rules: {
+    indent: 'off',
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    curly: ['error', 'all'],
+    'react/react-in-jsx-scope': 'off',
+    'import/order': ['error', { alphabetize: { order: 'asc' } }],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+  ignorePatterns: ['*.js', '*.mjs'],
+};

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 public
 .idea
 .DS_Store
+*.css.d.ts

.husky/pre-commit

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

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

lint-staged.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    "src/**/**/*.{ts,tsx}": [
+        "eslint --fix",
+        () => "tsc --noEmit"
+    ],
+    "src/**/**/*.{ts,tsx,css,scss}": [
+        "prettier --write"
+    ]
+}

package.json

@@ -7,10 +7,16 @@
     "gatsby"
   ],
   "scripts": {
-    "start": "gatsby develop --port 8082",
+    "start": "gatsby develop --port 8082 & tcm -w -c src",
     "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "lint": "eslint --ext src/**/**/*.{ts,tsx} --quiet",
+    "lint:fix": "eslint --fix --ext src/**/**/*.{ts,tsx} --quiet",
+    "prettier": "prettier --write 'src/**/**/*.{ts,tsx,css,scss}'",
+    "generate-css-types": "tcm -c src",
+    "lint-staged": "lint-staged",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@csstools/postcss-global-data": "^1.0.3",
@@ -48,10 +54,17 @@
     "@babel/core": "^7.21.3",
     "@mdx-js/react": "^2.3.0",
     "@types/react-helmet": "^6.1.6",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
     "babel-eslint": "^10.1.0",
     "babel-preset-gatsby": "^3.7.0",
     "core-js": "^3.29.1",
-    "eslint": "^8.36.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "gatsby": "5",
     "gatsby-plugin-image": "^3.7.0",
     "gatsby-plugin-manifest": "^5.7.0",
@@ -65,8 +78,12 @@
     "gatsby-transformer-remark": "^6.7.0",
     "gatsby-transformer-sharp": "^5.7.0",
     "glob": "^10.2.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
     "postcss": "^8.4.21",
+    "prettier": "^3.1.0",
     "prop-types": "^15.7.2",
+    "typed-css-modules": "^0.8.1",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.2.3"
   }

src/components/ContactUs/contactUs.module.css

@@ -1,5 +1,5 @@
 .br {
-    @media (--ktl-mm) {
-        display: none;
-    }
+  @media (--ktl-mm) {
+    display: none;
+  }
 }

src/components/ContactUs/index.tsx

@@ -1,21 +1,26 @@
-import { CtaBlock } from "@jetbrains/kotlin-web-site-ui/out/components/cta-block-v2";
+import { CtaBlock } from '@jetbrains/kotlin-web-site-ui/out/components/cta-block-v2';
 
-import {Link} from "../Link";
+import { Link } from '../Link';
 
-import * as styles from "./contactUs.module.css";
+import * as styles from './contactUs.module.css';
 
 const contactEmail = '[email protected]';
 
 export function ContactUs() {
-    return (
-        <CtaBlock
-            topTitle={<>Still have questions? <br className={styles.br}/>Contact us!</>}
-            classMainTitle="ktf-h2 ktf-h3--ts"
-            mainTitle={
-                <Link href={`mailto:${contactEmail}`} mode="clear">
-                    {contactEmail}
-                </Link>
-            }
-        />
-    );
+  return (
+    <CtaBlock
+      topTitle={
+        <>
+          Still have questions? <br className={styles.br} />
+          Contact us!
+        </>
+      }
+      classMainTitle="ktf-h2 ktf-h3--ts"
+      mainTitle={
+        <Link href={`mailto:${contactEmail}`} mode="clear">
+          {contactEmail}
+        </Link>
+      }
+    />
+  );
 }