vue3+ts项目:.eslintrc.js

一、背景

记录eslintrc.js的配置,方便日后回顾:

二、配置文件包括:

package.json、.eslintrc.js

三、常见配置项:

root:true
ESLint 自动在要检测的文件目录里寻找配置文件,紧接着是父级目录,一直到文件系统的根目录(除非指定 root: true)。当你想对一个项目的不同部分的使用不同配置,或当你希望别人能够直接使用 ESLint,而无需记住要在配置文件中传递什么,这种方式就很有用。
env :指定环境。
Globals:脚本在执行期间访问的额外的全局变量。
每个环境都有自己预定义的全局变量,可以同时指定多个环境,不矛盾。
parser:指定解析器。
plugins:配置插件。
rules:配置规则。
processor:指定处理器。
settings:添加共享设置。

四、一般规则:

rules: {
    "规则名": [规则值, 规则配置]
}

五、规则值:

"off"或者0    //关闭规则
"warn"或者1    //作为警告(不影响退出代码)
"error"或者2    //作为一个错误(退出代码触发时为1)

六、禁用规则

6.1、文件禁用规则

/* eslint-disable */
// 放在文件顶部
console.log('err');

6.2、 针对下一行禁用:

// eslint-disable-next-line
console.log('err');

七、package.json

"gitHooks": {
   "pre-commit": "lint-staged"
 },
 "lint-staged": {
   "*.ts": [
     "vue-cli-service lint",
     "git add"
   ],
   "*.vue": [
     "vue-cli-service lint",
     "git add"
   ]
}

八、 .eslintrc.js(本人项目使用供参考)

module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: [
      'plugin:vue/essential',
      '@vue/typescript/recommended'
    ],
    parserOptions: {
      ecmaVersion: 2020
    },
    rules: {
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/member-delimiter-style': ['error',
        {
          multiline: {
            delimiter: 'none'
          },
          singleline: {
            delimiter: 'comma'
          }
        }],
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-var-requires': 'off',
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'space-before-function-paren': ['error', 'never'],
      'vue/array-bracket-spacing': 'error',
      'vue/arrow-spacing': 'error',
      'vue/block-spacing': 'error',
      'vue/brace-style': 'error',
      'vue/camelcase': 'error',
      'vue/comma-dangle': 'error',
      'vue/component-name-in-template-casing': ['error', 'kebab-case'],
      'vue/eqeqeq': 'error',
      'vue/key-spacing': 'error',
      'vue/match-component-file-name': 'error',
      'vue/object-curly-spacing': 'error'
    },
    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      }
    ]
  }
  

九、欢迎交流指正

十、参考链接:

(15条消息) Vue中ESlint配置文件eslintrc.js文件详解_大雄-dx的博客-CSDN博客_eslintrc.js配置

(15条消息) 【ESLint】配置 ESLint_少莫千华-CSDN博客_eslint overrides

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是基于Vue3、Vite、TypeScript的项目搭建步骤: 1. 安装 Node.js 和 npm 在官网下载并安装 Node.js,npm会随之安装。 2. 创建项目 打开命令行工具,使用以下命令创建一个新的 Vue3 项目: ``` npm init vite-app <project-name> cd <project-name> npm install ``` 3. 添加 TypeScript 支持 通过以下命令安装 TypeScript: ``` npm install --save-dev typescript ``` 然后在项目根目录下创建一个 `tsconfig.json` 文件: ```json { "compilerOptions": { "target": "es6", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"] } ``` 4. 添加 Vue Router 和 Vuex 通过以下命令安装 Vue Router 和 Vuex: ``` npm install vue-router vuex --save ``` 5. 添加 SCSS 支持 通过以下命令安装 SCSS: ``` npm install sass sass-loader fibers --save-dev ``` 在 `src` 目录下创建一个名为 `style.scss` 的文件,并在 `main.ts` 中导入: ```scss @import './style.scss'; ``` 6. 添加 ESLint 和 Prettier 通过以下命令安装 ESLint 和 Prettier: ``` npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev ``` 在项目根目录下创建一个 `.eslintrc.js` 文件: ```js module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/vue3-essential", "@vue/typescript/recommended", "prettier", "prettier/@typescript-eslint", "prettier/vue", ], parserOptions: { ecmaVersion: 2020, }, rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/explicit-module-boundary-types": "off", }, }; ``` 在项目根目录下创建一个 `.prettierrc.js` 文件: ```js module.exports = { semi: true, trailingComma: "all", singleQuote: true, printWidth: 120, tabWidth: 2, }; ``` 7. 添加 Axios 支持 通过以下命令安装 Axios: ``` npm install axios --save ``` 在 `src` 目录下创建一个名为 `api.ts` 的文件,并在其中定义一个 Axios 实例: ```typescript import axios from 'axios'; const api = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 30000, }); export default api; ``` 8. 添加测试支持 通过以下命令安装 Jest 和 Vue Test Utils: ``` npm install jest @vue/test-utils ts-jest vue-jest babel-jest --save-dev ``` 在项目根目录下创建一个 `jest.config.js` 文件: ```js module.exports = { preset: "ts-jest", testEnvironment: "jsdom", transform: { "^.+\\.vue$": "vue-jest", "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", }, moduleNameMapper: { "^@/(.*)$": "<rootDir>/src/$1", }, setupFilesAfterEnv: ["<rootDir>/tests/setup.ts"], collectCoverage: true, collectCoverageFrom: ["src/**/*.{ts,vue}", "!**/node_modules/**"], coverageReporters: ["text-summary", "lcov", "html"], }; ``` 在项目根目录下创建一个 `tests/setup.ts` 文件: ```typescript import { config } from "@vue/test-utils"; config.global.mocks.$t = (key: string) => key; ``` 9. 运行项目 使用以下命令启动项目: ``` npm run dev ``` 此时,你已经成功搭建了一个基于 Vue3、Vite、TypeScript 的项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值