Adding Eslint prettier Lint-staged projects (TyepsciPRT

Eslint and Lint-lantines are now essential to projects, and typescript is even more so. Here’s how to add ESLint Lint-staged projects step by step

We have updated Nuxt3 to do a demo for the initial project

Thank you very much for your support. Thank you very much for your support. Thank you very much for your support

Initialize a Nuxt3 project

npx nuxi init nuxt3-demo
cd nuxt3-demo
yarn
Copy the code

Step 1: Add Eslint

Eslint Official in Chinese

Eslint is configured for us

npx eslint --init
Copy the code

Follow the steps as shown

Select the second option: test code and find parts that don’t conform to ESLint

Js standard select ES6 Modules

We have chosen vue.js template for Nuxt3 for demo

4. Use typesciprt

5. Select all of the operating environments of the project

Eslint Specifies the file type of the configuration file

Whether to install it directly

Let’s look at the project

Package. json file changes

{..."devDependencies": {
    "@typescript-eslint/eslint-plugin": "^ 5.7.0"."@typescript-eslint/parser": "^ 5.7.0"."eslint": "^ 8.5.0"."eslint-plugin-vue": "^ 8.2.0"}... }Copy the code

A.eslintrc.js file is generated

module.exports = {
    "env": {
        "browser": true."es2021": true."node": true
    },
    "extends": [
        "eslint:recommended"."plugin:vue/essential"."plugin:@typescript-eslint/recommended"]."parserOptions": {
        "ecmaVersion": 13."parser": "@typescript-eslint/parser"."sourceType": "module"
    },
    "plugins": [
        "vue"."@typescript-eslint"]."rules": {}};Copy the code

Here ecmaVersion: 13 refers to the VERSION of ES, which can be changed to ES2021 for more general use

Check whether ESLint is in effect

You also need yarn add -d typescript if typescript is not installed in your project

Eslint cli Chinese official website

Add script to package.json file

"lint": "eslint ."
Copy the code

Eslint will only detect.js files by default, so you need –ext to specify the file type, see the official website for details

In some cases, ESLint may not take effect in time, so you can restart our editor

Based on our project demo, let’s change our Lint script

"lint": "eslint . --ext .ts,.vue"
Copy the code

Step 2 Modify the configuration to match vue3

See the official eslint-plugin-vue address

You just need to change the vUE esLint configuration to a single configuration

Remove “plugin:vue/essential” from extends and “plugin:vue/essential” from plugins

module.exports = { ... .extends: [...'plugin:vue/vue3-recommended',],... }Copy the code

Step 3: Some configuration for Nuxt3

Nuxt3 has many custom rules that require additional configuration

yarn add -D eslint-plugin-nuxt
Copy the code

Modify the eslintrc. Js

.extends: [...'plugin:nuxt/recommended',]...Copy the code

Because Nuxt3 convention rules need to add rules:

rules: { 'vue/multi-word-component-names': 0 }
Copy the code

The project’s most basic ESLint configuration should be ready

4. Add prettier

You need to install two plug-ins

yarn add -D prettier eslint-plugn-prettier
Copy the code

Modify the.eslintrc.js

module.exports = { ... .extends: [...'prettier',],... }Copy the code

create.prettierrc.js, the contents are as follows

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false.// Open comma, default: true
  singleQuote: true.// Single quotation marks default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: 'none'./ / not tail semicolon default: es5 all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: 'avoid'.// default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: 'never'.// htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false, //.vue indent
  endOfLine: 'auto' // default lf
}
Copy the code

Paackage. json Add script prettier –write.

Step 5 Add Lint-staged Husky

yarn add -D lint-staged huksy

yarn set-script prepare "husky install"
yarn run prepare

npx husky add .husky/pre-commit "npx lint-staged"// You can also add pre-addCopy the code

Make some changes to package.json

."lint": "eslint . --ext .ts,.vue --fix"."lint-staged": {
    "*.{ts,vue}": [
      "prettier --write ."."npm run lint"]}Copy the code

This way, our project can get ESLint, Prettier, and Husky Lint-staged together

conclusion

eslint --initInitialize your own ESLint configuration based on your project
- The installation dependencies are
```
@typescript-eslint/eslint-plugin
typescript-eslint/parser
eslint
eslint-plugin-vue
Copy the code
```
The vue3 project only needs to use.eslintrc filesplugin:vue3/recommended
Additional required configurations: Nuxt3:eslint-plugin-nuxt
13. Prettier installs dependency on:eslint-plugin-prettier
Husky and lint – staged