CodePolisher 📝✨

The CodePolisher extension helps you improve your code quality! 🌟 It integrates with your favorite code correction tools and AI tools to automatically identify and fix issues.

Features ✨

• Code Formatting ⚙️: Automatically formats your code to adhere to style guidelines using your configured code correction software (e.g., Prettier).
• Error Detection 🐛: Identifies potential errors and bugs in your code using linters (e.g., ESLint).
• Style Issue Detection 🎨: Finds style issues and suggests improvements based on your code style preferences.
• AI Integration 🤖: Leverages AI for advanced code polishing, code explanation, and more!
• Auto-Fix on Save 💾: Automatically fixes code issues every time you save a file.
• Customizable Rules 🛠️: Configure the code correction software to match your preferences (e.g., ESLint, Prettier).
• Ask a question: You can ask a question about the code.

Prerequisites 🚀

Before using the CodePolisher extension, you'll need to make sure you have the following tools installed and set up on your system. Follow these detailed steps:

1. Visual Studio Code (VS Code) 💻

• What it is: VS Code is the code editor where you'll use the CodePolisher extension.
• Why it's needed: The CodePolisher extension runs inside VS Code.

Installation Steps:

1. Download: Go to the official VS Code website: https://code.visualstudio.com/ 🌐
2. Install: Run the installer and follow the on-screen instructions for your operating system (Windows, macOS, or Linux).
3. Verify: Open VS Code. If it opens without errors, you've successfully installed it! ✅

2. Node.js and npm 📦

• What they are:
  • Node.js: A JavaScript runtime environment that lets you run JavaScript code outside of a web browser.
  • npm (Node Package Manager): The default package manager for Node.js. It's used to install and manage JavaScript packages (like ESLint and Prettier).
• Why they're needed: CodePolisher uses Node.js to run ESLint and Prettier, and it uses npm to install them.

Installation Steps:

1. Download: Go to the official Node.js website: https://nodejs.org/ 🌐
2. Choose LTS: Download the LTS (Long Term Support) version for your operating system.
3. Install: Run the installer and follow the on-screen instructions.
4. Verify:
   • Open your terminal or command prompt. 🖥️
   • Check Node.js: Type node -v and press Enter. You should see the Node.js version number (e.g., v18.16.0).
   • Check npm: Type npm -v and press Enter. You should see the npm version number (e.g., 9.5.1).

3. ESLint (Optional) ✅

• What it is: A powerful tool for identifying and fixing stylistic errors and potential bugs in JavaScript and TypeScript code. 🐞
• Why it's needed: The CodePolisher extension can use ESLint to automatically fix many common code issues.
• Requirement: You must use Javascript or Typescript to use ESLint.

Installation Steps (Global Installation - Recommended for beginners):

1. Open your terminal or command prompt. 🖥️
2. Install ESLint globally:

bash
    npm install -g eslint
    

3. Verify: Type eslint -v and press Enter. You should see the ESLint version number.

Installation Steps (Local Installation - Recommended for projects):

1. Open your project folder in your terminal or command prompt. 📁
2. Install ESLint as a development dependency:

bash
    npm install --save-dev eslint
    

3. Verify:
   • Type npx eslint -v and press Enter. You should see the ESLint version number.

Configuration (Global or Local):

1. Create a configuration file:
   • If you don't have an .eslintrc.js or .eslintrc.json file in your project or home directory, you'll need to create one.
   • The easiest way is to use the following command in your project folder:

bash
    npx eslint --init
    

• Follow the prompts to set up ESLint according to your preferences.

2. Customize rules:
   • Open the .eslintrc.js or .eslintrc.json file and modify the rules as needed. ✍️
   • See the ESLint documentation for more details: https://eslint.org/

4. Prettier (Optional) ✨

• What it is: A fantastic code formatter that automatically makes your code look consistent and well-formatted. It supports many languages, including JavaScript, TypeScript, JSON, CSS, and HTML. ✨
• Why it's needed: The CodePolisher extension can use Prettier to automatically format your code.
• Requirement: You must use a file supported by Prettier.

Installation Steps (Global Installation - Recommended for beginners):

1. Open your terminal or command prompt. 🖥️
2. Install Prettier globally:

bash
    npm install -g prettier
    

3. Verify: Type prettier -v and press Enter. You should see the Prettier version number.

Installation Steps (Local Installation - Recommended for projects):

1. Open your project folder in your terminal or command prompt. 📁
2. Install Prettier as a development dependency:

bash
    npm install --save-dev prettier
    

3. Verify: Type npx prettier -v and press Enter. You should see the Prettier version number.

Configuration (Global or Local):

1. Create a configuration file:
   • If you don't have a .prettierrc.js or .prettierrc.json file in your project or home directory, you can create one.
   • You can also use other configuration files, like .prettierrc.yaml, .prettierrc.toml, etc.
   • Create a file named .prettierrc.json in your project folder and add the following:

json
    {
        "semi": true,
        "tabWidth": 4,
        "singleQuote": true
    }
    

2. Customize rules:
   • Open the configuration file and modify the rules. ✍️
   • See the Prettier documentation for more details: https://prettier.io/

5. CodePolisher Extension 🧽

How to Fix from the problem panel

1. Go to the problem panel.
2. Right-click on a problem.
3. Click on "Fix with CodePolisher".

• What it is: The CodePolisher extension is the tool that brings all the code-fixing and AI-powered features into VS Code.
• Why it's needed: This is the extension you want to use!

Installation Steps:

1. Open VS Code. 💻
2. Go to the Extensions Marketplace: Click on the Extensions icon in the Activity Bar (it looks like a square made of smaller squares). 🧩
3. Search for "CodePolisher": Type "CodePolisher" in the search bar. 🔍
4. Find the CodePolisher extension: It should appear in the search results.
5. Install: Click the "Install" button. ⬇️
6. Reload: If VS Code asks you to reload, do it. 🔄

6. Language Extensions (Optional) 🌐

• What they are: Extensions to add support to different languages in VS Code.
• Why they're needed: If you want to polish the code of other languages, you will need to install their extensions.

Installation Steps:

1. Open VS Code. 💻
2. Go to the Extensions Marketplace: Click on the Extensions icon in the Activity Bar. 🧩
3. Search for the language: Type the language name (e.g., "Python", "Java") in the search bar. 🔍
4. Find the language extension: It should appear in the search results.
5. Install: Click the "Install" button. ⬇️
6. Reload: If VS Code asks you to reload, do it. 🔄

7. Genkit (Optional) 🧠

• What it is: A tool to use AI features.
• Why it's needed: You will need it to use AI features.

Installation Steps:

1. Follow the instructions in the Genkit website: https://github.com/GoogleGenAI/genkit 🌐

How to Use 🚀

1. Open a code file in VS Code (e.g., a .js, .ts, .json, .css, or .html file).
2. Fix Code: Right-click anywhere in the code and select "Fix Code". This will run ESLint and/or Prettier based on your settings.
3. Auto-Fix on Save: If you've enabled this feature, code will be automatically fixed whenever you save the file.
4. Ask a question: You can use the ask a question view to ask a question about the code.
5. Configure: Use the settings to enable/disable the different tools.

Following extension guidelines 💡

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

For more information ℹ️

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy! 🎉