赞
踩
- // @ts-check
- const { defineConfig } = require('eslint-define-config')
- module.exports = defineConfig({
- root: true,
- env: {
- browser: true,
- node: true,
- es6: true
- },
- parser: 'vue-eslint-parser',
- parserOptions: {
- parser: '@typescript-eslint/parser',
- ecmaVersion: 2020,
- sourceType: 'module',
- jsxPragma: 'React',
- ecmaFeatures: {
- jsx: true
- }
- },
- extends: [
- 'plugin:vue/vue3-recommended',
- 'plugin:@typescript-eslint/recommended',
- 'prettier',
- 'plugin:prettier/recommended'
- ],
- rules: {
- 'vue/no-setup-props-destructure': 'off',
- 'vue/script-setup-uses-vars': 'error',
- 'vue/no-reserved-component-names': 'off',
- '@typescript-eslint/ban-ts-ignore': 'off',
- '@typescript-eslint/explicit-function-return-type': 'off',
- '@typescript-eslint/no-explicit-any': 'off',
- '@typescript-eslint/no-var-requires': 'off',
- '@typescript-eslint/no-empty-function': 'off',
- 'vue/custom-event-name-casing': 'off',
- 'no-use-before-define': 'off',
- '@typescript-eslint/no-use-before-define': 'off',
- '@typescript-eslint/ban-ts-comment': 'off',
- '@typescript-eslint/ban-types': 'off',
- '@typescript-eslint/no-non-null-assertion': 'off',
- '@typescript-eslint/explicit-module-boundary-types': 'off',
- '@typescript-eslint/no-unused-vars': 'off',
- 'no-unused-vars': 'off',
- 'space-before-function-paren': 'off',
-
- 'vue/attributes-order': 'off',
- 'vue/one-component-per-file': 'off',
- 'vue/html-closing-bracket-newline': 'off',
- 'vue/max-attributes-per-line': 'off',
- 'vue/multiline-html-element-content-newline': 'off',
- 'vue/singleline-html-element-content-newline': 'off',
- 'vue/attribute-hyphenation': 'off',
- 'vue/require-default-prop': 'off',
- 'vue/require-explicit-emits': 'off',
- 'vue/html-self-closing': [
- 'error',
- {
- html: {
- void: 'always',
- normal: 'never',
- component: 'always'
- },
- svg: 'always',
- math: 'always'
- }
- ],
- 'vue/multi-word-component-names': 'off',
- 'vue/no-v-html': 'off',
- 'vue/require-toggle-inside-transition': 'off'
- }
- })
-
- export default {
- printWidth: 100, // 一行最多多少字符
- tabWidth: 2, // 缩进的宽度,2 个空格
- useTabs: false, // 是否使用制表符,不使用制表符,使用空格
- semi: false, // 语句结尾是否使用分号
- bracketSpacing: true, // 大括号 {} 中开始和结束是否要空格,true — { foo: 1 },false — {foo: 1}
- trailingComma: 'none', // 数组或对象或参数的最后一项是否尾随逗号,none — 没有尾随逗号,all — 尽可能使用尾随逗号,es5 — 在 ES5 中有效的尾随逗号(对象、数组等),TypeScript 和 Flow 类型参数中的尾随逗号。
- arrowParens: 'always', // 只有一个参数的箭头函数是否带括号,always — 始终带括号,avoid — 不带括号
- proseWrap: 'always', // 什么对代码进行折行,always — 如果超过 printWidth 指定的一行最多字符宽度,则进行折行;never — 将每块代码块展开成一行;preserve — 什么都不做,保持原样。
- htmlWhitespaceSensitivity: 'strict', // 根据显示样式决定 html 要不要折行
- endOfLine: 'auto', // 每行的结束符(回车符、换行符),取值请参考 https://www.prettier.cn/docs/options.html#end-of-line
- // 每个文件格式化的范围是文件的全部内容
- rangeStart: 0,
- rangeEnd: Infinity,
- // 不需要写文件开头的@prettier
- requirePragma: false,
- // 不需要自动在文件开头插入@prettier
- insertPragma: false,
- }
- {
- "workbench.colorTheme": "Visual Studio Dark",
- "editor.accessibilitySupport": "off",
- "git.autofetch": true,
- "editor.tabSize": 2,
- "security.workspace.trust.untrustedFiles": "open",
- "gitlens.views.branches.branches.layout": "list",
- "editor.fontSize": 15,
- "GitCommitPlugin.ShowEmoji": false,
- "workbench.editorAssociations": {
- "git-rebase-todo": "gitlens.rebase"
- },
- "[javascript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
- },
- "liveServer.settings.donotShowInfoMsg": true,
- "explorer.confirmDelete": false,
- "window.zoomLevel": 1,
- "breadcrumbs.enabled": false,
- "editor.stickyScroll.enabled": false,
- "cSpell.userWords": [
- "consola",
- "iconify",
- "persistedstate",
- "pinia",
- "popconfirm",
- "unplugin",
- "vite"
- ],
- "[vue]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "eslint.enable": true,
- "eslint.run": "onType",
- "eslint.options": {
- "extensions": [
- ".js",
- ".ts",
- ".vue",
- ".jsx",
- ".tsx"
- ]
- },
- "eslint.codeActionsOnSave.rules": null,
- }
方式一:
方式二:
在代码上局部 格式化
======================
总结:
Prettier (代码规范的插件,格式化 )---> 美观
Eslint (规范、纠错、检验错误 )-----> 纠错
首先,禁用 Prettier 插件,安装 ESLint 插件,配置保存时自动修复
再 配置代码风格文件 .eslintrc.cjs(Prettier 配置 + ESLint 配置,附配置代码)
配置内容 如,
Prettier:单引号、无分号、每行宽度限制 80字符、不加对象/数组最后逗号、换行符号不限制(win mac不一样)
ESLint:vue组件名称多单词组成(忽略 index.vue)、props解构关闭、未定义变量错误提示
流程:
流程:
配置文件 .eslintrc.cjs 文件
- rules: {
- // 前置
- // 1. 禁用格式化插件 prettier format on save 关闭
- // 2. 安装Eslint插件,并配置保存时自动修复
-
- // prettier 专注于美观度
- 'prettier/prettier': [
- 'warn',
- {
- singleQuote: true, // 单引号
- semi: false, // 无分号
- printWidth: 80, // 每行宽度至多80字符
- trailingComma: 'none', // 不加对象|数组最后逗号
- endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
- }
- ],
-
- // ESLint专注于规范,不符合规范 则报错
- 'vue/multi-word-component-names': [
- 'warn',
- {
- ignores: ['index'] // vue组件名称多单词组成(忽略index.vue / index.vue除外)
- }
- ],
- 'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验(props解构丢失响应式)
- // 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示
- 'no-undef': 'error'
- }
检查,禁用 Prettier 插件,采用 package.json 中的 prettier
安装 ESLint 插件
在设置中,配置保存时自动修复,(不要开启默认的自动保存格式化)
保存时自动修复,代码如下
- // 二则冲突。可以达成vue2和vue3的统一
- // ESlint插件 + Vscode配置 实现自动格式化修复
- "editor.codeActionsOnSave": {
- "source.fixAll": true
- },
- // 关闭保存自动格式化
- "editor.formatOnSave": false,
此时,保存 可自动根据规范 进行代码修复。
参考:vue3项目 - Eslint 配置代码风格_eslint配置模板-CSDN博客
最后重启vscode就可以啦!!!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。