ESLint and Prettier configurations for easy integration into my project. Based on the Airbnb Style Guide, with adjustments to match my own style preferences and experience.
The eslint section includes all combinations of language and framework as follows:
js.js
: Basic JavaScript rules.ts.js
: Basic TypeScript rules.react-js.js
: Rules for JavaScript in React projects.react-ts.js
: Rules for TypeScript in React projects.
Prettier provides a generic configuration:
prettier.js
: Generic Prettier configuration.
Install fe-lint
itself:
yarn add @tkwang/fe-lint -D
Install ESLint and Prettier:
yarn add eslint@^8.2.0 prettier@^2.6.2 -D
Based on your project type, import the corresponding configuration file into your .eslintrc.js
:
For example, for a TypeScript React project, you can import the react-ts
configuration:
module.exports = {
extends: [require.resolve("@tkwang/fe-lint/react-ts")],
};
Note: If your
package.json
specifies"type": "module"
, rename the.eslintrc.js
file to.eslintrc.cjs
.
In your project, you may often use aliases, such as using @/
to represent <project-root>/src/
. To ensure that ESLint recognizes these aliases, you need to make some configurations. For TypeScript projects, add the following settings to your .eslintrc.js
:
settings: {
'import/resolver': {
typescript: {
project: './tsconfig.json',
},
},
},
The
eslint-plugin-import
can recognize alias configurations in other files. See Resolvers for more details.
In your .prettierrc.js
file, simply write the following line:
module.exports = require("@tkwang/fe-lint/prettier");
For VSCode users, it's recommended to install the following extensions to provide code suggestions and auto-fixing at the editor level:
- dbaeumer.vscode-eslint
- esbenp.prettier-vscode
Once you have installed these extensions, you can enable auto-fixing by adding the following configuration to your VSCode settings.json
:
Note:
- The
settings.json
in the VSCode editor menu applies to global settings, which means it will be applied to other projects as well when opened.- VSCode can also recognize
.vscode/settings.json
in the project directory as the configuration for the current project, with higher priority. If you only want to enable auto-fixing for the current project, create.vscode/settings.json
in your project directory and include the desired configuration.
{
"editor.defaultFormatter": "esbenp.prettier-vscode", // Use Prettier as the default code formatter
"editor.formatOnSave": true // Format code on save
}
For projects that do not specify Prettier configurations, the VSCode Prettier plugin will use default configurations to format the code. This may lead to unexpected formatting changes. If you want to avoid this behavior, you can change the global
settings.json
in VSCode to"editor.formatOnSave": false
and then create.vscode/settings.json
in the project with the desired Prettier configurations.
{
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
For users who do not use the auto-fixing features of VSCode or prefer command-line solutions, you can use the following commands for code checking and auto-fixing. You can adjust these scripts according to your project's specific needs.
// package.json
{
"scripts": {
"lint:js": "eslint ./src --ext .js,.ts,.jsx,.tsx",
"lint:js-fix": "eslint --fix ./src --ext .js,.ts,.jsx,.tsx",
"prettier": "prettier --check .",
"prettier:fix": "prettier --write ."
}
}
During development, running a full code check on the entire project can be time-consuming. If you only want to check the code changes made in the current session, you can use the following commands. These commands will only check the code in the Git staged area:
// package.json
{
"scripts": {
"lint-staged": "eslint `git diff --name-only --staged --diff-filter=AM`",
"lint-staged:js-fix": "eslint --fix `git diff --name-only --staged --diff-filter=AM`",
"prettier-staged": "prettier --check `git diff --name-only --staged --diff-filter=AM`",
"prettier-staged:fix": "prettier --write `git diff --name-only --staged --diff-filter=AM`"
}
}
The git diff --name-only --staged --diff-filter=AM
command retrieves the file paths in the Git staged area. For more details, refer to Git list of staged files.
Use yarn link
for debugging. Here's how to do it:
- Navigate to the
fe-lint
directory and run:
yarn && yarn link
- Navigate to your project directory and run:
yarn link
"@tkwang/fe-lint"
With these steps, any changes you make to the fe-lint
project will be reflected in your project, allowing you to debug locally.
I've followed the above configurations and installed the VSCode extension, but I don't see any error prompts.
Usually, simply restarting VSCode should resolve the issue.
Translate the provided content into English.