From d0150f58e911e8af6b5e8bbaf5face82c7506f7a Mon Sep 17 00:00:00 2001 From: Stavan Sanghvi Date: Thu, 21 Dec 2023 13:59:51 +0530 Subject: [PATCH 1/3] feat: Add Docs for the Config files --- docs/common/editor-settings.md | 36 +++++++++++++++++ docs/common/extensions.md | 25 ++++++++++++ docs/common/gitattributes.md | 16 ++++++++ docs/common/precommit.md | 21 ++++++++++ docs/react/eslintrc.md | 45 +++++++++++++++++++++ docs/react/lintstagedrc.md | 21 ++++++++++ docs/react/prettier.md | 71 ++++++++++++++++++++++++++++++++++ 7 files changed, 235 insertions(+) create mode 100644 docs/common/editor-settings.md create mode 100644 docs/common/extensions.md create mode 100644 docs/common/gitattributes.md create mode 100644 docs/common/precommit.md create mode 100644 docs/react/eslintrc.md create mode 100644 docs/react/lintstagedrc.md create mode 100644 docs/react/prettier.md diff --git a/docs/common/editor-settings.md b/docs/common/editor-settings.md new file mode 100644 index 0000000..3f6948a --- /dev/null +++ b/docs/common/editor-settings.md @@ -0,0 +1,36 @@ +# Visual Studio Code Settings (settings.json) + +## Overview + +The `settings.json` file configures Visual Studio Code (VSCode) settings to customize the editor's behavior and integrate with code formatting and linting tools. It is recommended to maintain consistent configurations across all developers' VSCode editors for a unified development experience. + +The `settings.json` file enhances the VSCode editor experience by enabling automatic code formatting on save and paste, specifying the default formatter, and defining code actions for ESLint and import organization. + +### Configuration Details + +- **`editor.formatOnSave`** + + - **Description:** Enables automatic code formatting when saving a file. + - **Value:** `true` + +- **`editor.formatOnPaste`** + + - **Description:** Enables automatic code formatting when pasting code into the editor. + - **Value:** `true` + +- **`editor.defaultFormatter`** + + - **Description:** Sets the default formatter for code formatting. + - **Value:** `"esbenp.prettier-vscode"` + +- **`editor.codeActionsOnSave`** + + - **Description:** Defines code actions to run on save. + - **Actions:** + - `source.fixAll.eslint`: Runs ESLint to fix all issues. + - `source.fixAll.format`: Runs the default formatter to fix formatting issues. + - `source.organizeImports`: Organizes imports in the source code. + +- **`files.eol`** + - **Description:** Specifies the default end-of-line (EOL) character. + - **Value:** `"\n"` diff --git a/docs/common/extensions.md b/docs/common/extensions.md new file mode 100644 index 0000000..1bf3dfb --- /dev/null +++ b/docs/common/extensions.md @@ -0,0 +1,25 @@ +# Visual Studio Code Extensions Recommendations (extensions.json) + +## Overview + +The `extensions.json` file provides a list of recommended Visual Studio Code extensions for developers working on a project. It is advisable for all team members to install these extensions to enhance productivity and maintain a consistent development environment. + +### Configuration Details + +- **`recommendations`** + - **Description:** Lists recommended extensions for Visual Studio Code. + - **Extensions:** + - `aaron-bond.better-comments`: Improves the styling and rendering of comments. + - `codeium.codeium`: Enhances collaboration by providing a collaborative coding platform which provides free AI code acceleration plugin for your favorite languages. + - `mikestead.dotenv`: Adds support for .env file syntax highlighting. + - `dbaeumer.vscode-eslint`: Integrates ESLint for JavaScript and TypeScript linting. + - `wix.vscode-import-cost`: Displays import costs for JavaScript and TypeScript. + - `visualstudioexptteam.vscodeintellicode`: Enhances code completion with machine learning. + - `yzhang.markdown-all-in-one`: Simplifies Markdown editing with various features. + - `christian-kohler.path-intellisense`: Autocompletes filenames in the editor. + - `esbenp.prettier-vscode`: Integrates Prettier for code formatting. + - `sonarsource.sonarlint-vscode`: Provides static code analysis to identify and fix code quality issues. + +## Conclusion + +The `extensions.json` file recommends essential Visual Studio Code extensions for a standardized and efficient development experience. Ensure that all team members install these extensions to maintain consistency across the development environment. diff --git a/docs/common/gitattributes.md b/docs/common/gitattributes.md new file mode 100644 index 0000000..977dee4 --- /dev/null +++ b/docs/common/gitattributes.md @@ -0,0 +1,16 @@ +# Git Attributes Configuration (.gitattributes) + +## Overview + +The `.gitattributes` file specifies attributes for files and directories in a Git repository. It helps define how Git should handle line endings and automatic text file detection. + +### Configuration Details + +- **Pattern: `*`** + - **Attributes:** + - `text=auto`: Instructs Git to automatically detect whether a file is a text file. + - `eol=lf`: Specifies the default end-of-line (EOL) character as Unix/Linux line endings (`LF`). + +## Conclusion + +The `.gitattributes` file ensures consistent handling of line endings and automatic text file detection in a Git repository. The specified configuration helps maintain cross-platform compatibility and a unified codebase. diff --git a/docs/common/precommit.md b/docs/common/precommit.md new file mode 100644 index 0000000..0f8344c --- /dev/null +++ b/docs/common/precommit.md @@ -0,0 +1,21 @@ +# Pre-commit Hook Configuration (precommit) + +## Overview + +The `precommit` file is a pre-commit hook configuration script used to automate tasks before committing changes. It leverages Husky and lint-staged to run specific commands on staged files before they are committed. + +### Configuration Details + +- **Script:** + + - **File Name:** `precommit` + - **Location:** Project root + - **Interpreter:** `/usr/bin/env sh` + +- **Commands:** + - **Husky Setup:** Sources the `husky.sh` script to set up Husky. + - **lint-staged:** Uses `npx` to run lint-staged, which executes specified tasks on staged files. + +## Conclusion + +The `precommit` script enhances the pre-commit workflow by automatically running tasks, such as linting staged files, before allowing a commit. This helps maintain code quality and consistency throughout the development process. diff --git a/docs/react/eslintrc.md b/docs/react/eslintrc.md new file mode 100644 index 0000000..f9c5c9e --- /dev/null +++ b/docs/react/eslintrc.md @@ -0,0 +1,45 @@ +# ESLint Configuration (.eslintrc.json) + +## Overview + +The `.eslintrc.json` file is used with ESLint, a JavaScript and TypeScript linter, to enforce coding standards, catch errors, and maintain a consistent codebase. + +The `.eslintrc.json` file is essential for enforcing coding standards and maintaining a consistent codebase in JavaScript and TypeScript projects. Customize based on project requirements. + +### `env` + +- **Description:** Specifies environments for ESLint. +- **Values:** + - `browser`: Enables browser global variables. + - `node`: Enables Node.js global variables. + +### `parser` + +- **Description:** Specifies the parser for code analysis. +- **Value:** `@typescript-eslint/parser` + +### `parserOptions` + +- **Description:** Configures parser options for ECMAScript and TypeScript. + +### `plugins` + +- **Description:** Lists ESLint plugins for linting specific code types. + - `react` + - `react-hooks` + - `promise` + - `import` + - `@typescript-eslint` + +### `ignorePatterns` + +- **Description:** Ignores specified file patterns. + +### `rules` + +- **Description:** Specifies ESLint rules and their configurations. + - `react/react-in-jsx-scope`: Turns off React import requirement. + - `jsx-a11y/anchor-is-valid`: Turns off anchor element validation. + - `@typescript-eslint/no-unused-vars`: Warns on unused TypeScript variables. + - `prettier/prettier`: Enforces Prettier code formatting rules. + - `promise/prefer-await-to-then`: Warns against using `.then()`. diff --git a/docs/react/lintstagedrc.md b/docs/react/lintstagedrc.md new file mode 100644 index 0000000..611444f --- /dev/null +++ b/docs/react/lintstagedrc.md @@ -0,0 +1,21 @@ +# lint-staged Configuration (.lintstagedrc.json) + +## Overview + +The `.lintstagedrc.json` file configures lint-staged, a Git pre-commit hook tool, to run specific tasks on files that are staged for commit. + +The `.lintstagedrc.json` file optimizes the pre-commit process by focusing linting and formatting tasks on staged files. Customize the configuration based on project requirements and coding conventions. + +### Configuration Details + +- **Pattern: `**/\*.{js,jsx,ts,tsx}`\*\* + + - **Description:** Targets JavaScript and TypeScript files for linting and formatting. + - **Tasks:** + - `eslint --fix`: Runs ESLint with the fix option to automatically correct linting issues. + - `prettier --config ./.prettierrc.json --write`: Runs Prettier with a specific configuration file to format code. + +- **Pattern: `**/\*.{css,scss,md,html,json}`\*\* + - **Description:** Targets CSS, SCSS, Markdown, HTML, and JSON files for formatting. + - **Task:** + - `prettier --config ./.prettierrc.json --write`: Runs Prettier with a specific configuration file to format code. diff --git a/docs/react/prettier.md b/docs/react/prettier.md new file mode 100644 index 0000000..562d035 --- /dev/null +++ b/docs/react/prettier.md @@ -0,0 +1,71 @@ +# Prettier Configuration (.prettierrc.json) + +## Overview + +The `.prettierrc.json` file is used with Prettier, a code formatter, to define code styling rules and formatting options. + +The `.prettierrc.json` file sets Prettier formatting rules, ensuring code consistency and adherence to styling preferences. Customize these settings according to project requirements and coding conventions. + +### Configuration Details + +- **`printWidth`** + + - **Description:** Specifies the maximum line length before wrapping. + - **Value:** `80` + +- **`singleQuote`** + + - **Description:** Determines whether single or double quotes are used for strings. + - **Value:** `false` + +- **`trailingComma`** + + - **Description:** Controls the usage of trailing commas in object literals and arrays. + - **Value:** `"es5"` + +- **`tabWidth`** + + - **Description:** Defines the number of spaces per indentation level. + - **Value:** `2` + +- **`endOfLine`** + - **Description:** Specifies the line ending style. + - **Value:** `"lf"` + +# Prettier Ignore File (.prettierignore) + +## Overview + +The `.prettierignore` file is used with Prettier, a code formatter, to specify files and directories that should be excluded from formatting. + +The `.prettierignore` file excludes files and directories from Prettier formatting. Customize this file based on project requirements and coding conventions. + +### Configuration Details + +- **Pattern: `.next`** + + - **Description:** Excludes the `.next` directory from formatting. + +- **Pattern: `.cache`** + + - **Description:** Excludes the `.cache` directory from formatting. + +- **Pattern: `package-lock.json`** + + - **Description:** Excludes the `package-lock.json` file from formatting. + +- **Pattern: `public`** + + - **Description:** Excludes the `public` directory from formatting. + +- **Pattern: `node_modules`** + + - **Description:** Excludes the `node_modules` directory from formatting. + +- **Pattern: `next-env.d.ts`** + + - **Description:** Excludes the `next-env.d.ts` file from formatting. + +- **Pattern: `next.config.ts`** + + - **Description:** Excludes the `next.config.ts` file from formatting. From 147c8fdda694c4c9c2e187e281fdea80e6e10720 Mon Sep 17 00:00:00 2001 From: Stavan Sanghvi Date: Thu, 21 Dec 2023 15:34:58 +0530 Subject: [PATCH 2/3] fix: Add extension detail to doc --- docs/common/extensions.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/common/extensions.md b/docs/common/extensions.md index 1bf3dfb..b0f6ce2 100644 --- a/docs/common/extensions.md +++ b/docs/common/extensions.md @@ -18,6 +18,7 @@ The `extensions.json` file provides a list of recommended Visual Studio Code ext - `yzhang.markdown-all-in-one`: Simplifies Markdown editing with various features. - `christian-kohler.path-intellisense`: Autocompletes filenames in the editor. - `esbenp.prettier-vscode`: Integrates Prettier for code formatting. + - `chakrounanas.turbo-console-log`: Adds a shortcut to console.log statements. - `sonarsource.sonarlint-vscode`: Provides static code analysis to identify and fix code quality issues. ## Conclusion From 597def5573d74b25e4f009ba6319fded4927e5de Mon Sep 17 00:00:00 2001 From: Stavan Sanghvi Date: Wed, 27 Dec 2023 12:59:13 +0530 Subject: [PATCH 3/3] feat: Add GitLens Extension Details --- docs/common/extensions.md | 1 + docs/react/lintstagedrc.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/common/extensions.md b/docs/common/extensions.md index b0f6ce2..ad07a97 100644 --- a/docs/common/extensions.md +++ b/docs/common/extensions.md @@ -20,6 +20,7 @@ The `extensions.json` file provides a list of recommended Visual Studio Code ext - `esbenp.prettier-vscode`: Integrates Prettier for code formatting. - `chakrounanas.turbo-console-log`: Adds a shortcut to console.log statements. - `sonarsource.sonarlint-vscode`: Provides static code analysis to identify and fix code quality issues. + - `eamodio.gitlens`: Enhances Git integration with features like commit history exploration and blame annotations. ## Conclusion diff --git a/docs/react/lintstagedrc.md b/docs/react/lintstagedrc.md index 611444f..8434260 100644 --- a/docs/react/lintstagedrc.md +++ b/docs/react/lintstagedrc.md @@ -8,14 +8,14 @@ The `.lintstagedrc.json` file optimizes the pre-commit process by focusing linti ### Configuration Details -- **Pattern: `**/\*.{js,jsx,ts,tsx}`\*\* +- **Pattern: `**/\*.{js,jsx,ts,tsx}`** - **Description:** Targets JavaScript and TypeScript files for linting and formatting. - **Tasks:** - `eslint --fix`: Runs ESLint with the fix option to automatically correct linting issues. - `prettier --config ./.prettierrc.json --write`: Runs Prettier with a specific configuration file to format code. -- **Pattern: `**/\*.{css,scss,md,html,json}`\*\* +- **Pattern: `**/\*.{css,scss,md,html,json}`** - **Description:** Targets CSS, SCSS, Markdown, HTML, and JSON files for formatting. - **Task:** - `prettier --config ./.prettierrc.json --write`: Runs Prettier with a specific configuration file to format code.