vue3+vite配置eslintprettier

一、创建一个 vite + vue3 + ts 项目

npm init vite@latest

二、安装 eslint 依赖

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 代码的规范。

三、eslint 相关配置说明

环境配置 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 (当被触发的时候，程序会退出)

四、.eslintrc.js 配置规则文件

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,// 属性是否应垂直对齐到多行情况下的第一个属性的条件。默认为truealignAttributesVertically: 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",},
}

五、.eslintignore 配置 eslint 忽略文件

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
prettier.config.js
/src/mock/*

六、安装 prettier 依赖

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

• prettier：prettier 插件的核心代码。
• eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效。
• eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

七、.prettierrc.js 配置规则文件

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"
}

八、.prettierignore 配置 prettier 忽略文件

/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*

九、关于 esint + prettier 在 webstorm 中的配置

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 有冲突 （可能配置有点问题）

十、package.json

注意：
// 默认为 “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/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！