赞
踩
npm init vite@latest
npm i eslint@7.23.0 eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
- eslint: ESLint 的核心代码。
- eslint-plugin-vue:包含常用的 vue 规范。
- @typescript-eslint/parser:ESLint 的解析器,用于解析 typescript,从而检查和规范 Typescript 代码。
- @typescript-eslint/eslint-plugin:包含了各类定义好的检测 Typescript 代码的规范。
环境配置 env
一个环境定义了一组预定义的全局变量。可用的环境包括
- browser - 浏览器环境中的全局变量。
- node - Node.js 全局变量和 Node.js 作用域。
- commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
- shared-node-browser - Node.js 和 Browser 通用全局变量。
- es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6)。
- worker - Web Workers 全局变量。
- amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
- mocha - 添加所有的 Mocha 测试全局变量。
- jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
- jest - Jest 全局变量。
- phantomjs - PhantomJS 全局变量。
- protractor - Protractor 全局变量。
- qunit - QUnit 全局变量。
- jquery - jQuery 全局变量。
- prototypejs - Prototype.js 全局变量。
- shelljs - ShellJS 全局变量。
- meteor - Meteor 全局变量。
- mongo - MongoDB 全局变量。
- applescript - AppleScript 全局变量。
- nashorn - Java 8 Nashorn 全局变量。
异常等级配置
- “off” 或 0 - 关闭规则
- “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
- “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
module.exports = { // 当前配置为根配置,将不再从上级文件夹查找配置 root: true, /* 指定如何解析语法。可以为空,但若不为空,只能配该值,原因见下文。*/ parser: 'vue-eslint-parser', /* 优先级低于parse的语法解析配置 */ parserOptions: { parser: '@typescript-eslint/parser', }, // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals // globals: { // Nullable: true, // }, extends: [ // 扩展使用 vue3 检查规则和eslint推荐规则 'plugin:vue/vue3-recommended', 'eslint:recommended', // typescript-eslint推荐规则, 'plugin:@typescript-eslint/recommended', // prettier推荐规则, 'prettier', 'plugin:prettier/recommended', ], rules: { // 关闭名称校验 'vue/multi-word-component-names': "off", // 禁止使用 var 'no-var': 'error', // 优先使用 interface 而不是 type '@typescript-eslint/consistent-type-definitions': ['error', 'interface'], // 禁止any类型,报错关闭 '@typescript-eslint/no-explicit-any': 'off', // 需要导出函数和类的公共类方法的显式返回和参数类型,报错关闭 '@typescript-eslint/explicit-module-boundary-types': 'off', // 禁止某些类型如String、Number,报错关闭 '@typescript-eslint/ban-types': 'off', // 禁止未使用的变量,报错关闭 '@typescript-eslint/no-unused-vars': 'off', // vue首行缩进两字符 'vue/html-indent': [ 'error', 2, { // 属性缩进的乘数。默认为1。 attribute: 1, // 顶级语句的缩进倍数。默认为1。 baseIndent: 1, // 右括号缩进的乘数。默认为0。 closeBracket: 0, // 属性是否应垂直对齐到多行情况下的第一个属性的条件。默认为true alignAttributesVertically: true, // 忽略节点的选择器。默认是[] ignores: [], }, ], // 每行最大属性数关闭 'vue/max-attributes-per-line': ['off'], // 强制使用驼峰命名 // 'vue/component-name-in-template-casing': [ // 'error', // 'PascalCase', // { // // 如果true,则仅检查已注册的组件(在 PascalCase 中)。如果false,检查所有。默认true // registeredComponentsOnly: false, // ignores: [], // }, // ], // 编辑器里会给prettier错误进行报错 "prettier/prettier": "error", }, }
*.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin .eslintrc.js prettier.config.js /src/mock/*
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
- prettier:prettier 插件的核心代码。
- eslint-config-prettier:解决 ESLint 中的样式规范和 prettier 中样式规范的冲突,以 prettier 的样式规范为准,使 ESLint 中的样式规范自动失效。
- eslint-plugin-prettier:将 prettier 作为 ESLint 规范来使用。
module.exports = { // 行位不需要分号 "semi": false, // 使用单引号 "singleQuote": true, // 让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // 让prettier使用eslint的代码格式进行校验 "eslintIntegration": true, // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的 "htmlWhitespaceSensitivity": "ignore", // 换行符使用 auto "endOfLine": "auto" }
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
File
|Settings
|Languages & Frameworks
|JavaScript
|Code Quality Tools
|ESLint
中选中Automatic ESLint configuration
再勾选 Run eslint --fix on save
File
|Settings
|Languages & Frameworks
|JavaScript
|Prettier
中设置 Run for files 为{**/*,*}.{js,ts,jsx,tsx,vue}
。其中 On code reformat 和 On save 不需要勾选,否则会和eslint 有冲突 (可能配置有点问题)
注意:
// 默认为 “type”: “module”, 修改成"commonjs"
“type”: “commonjs”,
// 可添加如下两条命令
“lint”: “eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx”,
“format”: “prettier --write “**/*.{js,jsx,ts,tsx,css,vue}””
{ "name": "xxx", "private": true, "version": "0.0.0", // 默认为 "type": "module", 修改成"commonjs" "type": "commonjs", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview", // 可添加如下两条命令 "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,vue}\"" }, "dependencies": { "eslint-define-config": "^1.7.0", "vue": "^3.2.37" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/parser": "^5.36.1", "@vitejs/plugin-vue": "^3.0.3", "eslint": "^7.23.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.4.0", "prettier": "^2.7.1", "typescript": "^4.6.4", "vite": "^3.0.7", "vue-tsc": "^0.39.5" } }
规范查询地址:
eslint规范查询:https://cn.eslint.org/docs/rules/
vue的eslint规范查询:https://eslint.vuejs.org/rules/
typescript的eslint规范查询:https://typescript-eslint.io/rules/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。