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:
- Download: Go to the official VS Code website: https://code.visualstudio.com/ 🌐
- Install: Run the installer and follow the on-screen instructions for your operating system (Windows, macOS, or Linux).
- 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:
- Download: Go to the official Node.js website: https://nodejs.org/ 🌐
- Choose LTS: Download the LTS (Long Term Support) version for your operating system.
- Install: Run the installer and follow the on-screen instructions.
- 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):
- Open your terminal or command prompt. 🖥️
- Install ESLint globally:
bash
npm install -g eslint
- Verify: Type
eslint -v
and press Enter. You should see the ESLint version number.
Installation Steps (Local Installation - Recommended for projects):
- Open your project folder in your terminal or command prompt. 📁
- Install ESLint as a development dependency:
bash
npm install --save-dev eslint
- Verify:
- Type
npx eslint -v
and press Enter. You should see the ESLint version number.
Configuration (Global or Local):
- 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.
- 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):
- Open your terminal or command prompt. 🖥️
- Install Prettier globally:
bash
npm install -g prettier
- Verify: Type
prettier -v
and press Enter. You should see the Prettier version number.
Installation Steps (Local Installation - Recommended for projects):
- Open your project folder in your terminal or command prompt. 📁
- Install Prettier as a development dependency:
bash
npm install --save-dev prettier
- Verify: Type
npx prettier -v
and press Enter. You should see the Prettier version number.
Configuration (Global or Local):
- 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
}
- Customize rules:
- Open the configuration file and modify the rules. ✍️
- See the Prettier documentation for more details: https://prettier.io/
5. CodePolisher Extension 🧽
- 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:
- Open VS Code. 💻
- Go to the Extensions Marketplace: Click on the Extensions icon in the Activity Bar (it looks like a square made of smaller squares). 🧩
- Search for "CodePolisher": Type "CodePolisher" in the search bar. 🔍
- Find the CodePolisher extension: It should appear in the search results.
- Install: Click the "Install" button. ⬇️
- 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:
- Open VS Code. 💻
- Go to the Extensions Marketplace: Click on the Extensions icon in the Activity Bar. 🧩
- Search for the language: Type the language name (e.g., "Python", "Java") in the search bar. 🔍
- Find the language extension: It should appear in the search results.
- Install: Click the "Install" button. ⬇️
- 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:
- Follow the instructions in the Genkit website: https://github.com/GoogleGenAI/genkit 🌐
How to Use 🚀
- Open a code file in VS Code (e.g., a
.js
, .ts
, .json
, .css
, or .html
file).
- Fix Code: Right-click anywhere in the code and select "Fix Code". This will run ESLint and/or Prettier based on your settings.
- Auto-Fix on Save: If you've enabled this feature, code will be automatically fixed whenever you save the file.
- Ask a question: You can use the ask a question view to ask a question about the code.
- 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.
Enjoy! 🎉