TypeScript项目中使用ESLint

创建

mkdir typescript-eslint-project
cd ts-eslint-project
npm init -y

依赖

npm install typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

配置.eslintrc

touch .eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "no-console": 0,
  }
}

配置.eslintignore

touch .eslintignore 

node_modules
dist

package.json 配置lint

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .ts"
  }

创建src/index.ts

mkdir src 
cd src 
touch index.ts 

//index.ts 
console.log ("hello world!")

执行 npm run lint 。

Eslint插件

// noi-loops : 它的功能就是禁止在代码中使用for, for-in, while, do-while, for-of循环，可以使用map、forEach等方法替代。

//安装 npm install eslint-plugin-no-loops -D
配置 
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "no-loops"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "no-console": 0,
    "no-loops/no-loops":2
  }
}

第三方插件 eslint-plugin-shopify

//安装：
npm install eslint-plugin-shopify -D

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:shopify/esnext"
  ],
  "rules": {
    "no-console": 0
  }
}

结合 vscode 的 Prettier - Code formatter自动格式代码

image.png

打开vscode 的命令面板搜索 Preferences:OpenSetings(JOSN)

image.png image.png

然后添加一下代码

// 粘贴时格式化代码
"editor.formatOnPaste": true,
// 保存时格式化代码
"editor.formatOnSave": true,
"[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },