如何实现vue3+ts+EsLint+Prettier规范代码

本篇内容主要讲解"如何实现vue3+ts+EsLint+Prettier规范代码"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何实现vue3+ts+EsLint+Prettier规范代码"吧!

使用

EsLint的使用

安装依赖

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

这四个依赖分别是：

• - `eslint`: EsLint的核心代码

• - `eslint-plugin-vue`：[为Vue使用Eslint的插件](https://eslint.vuejs.org/)

• - `@typescript-eslint/parser`：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码

• - `@typescript-eslint/eslint-plugin`：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范

添加配置文件

npx eslint --init

根目录下增加.eslintrc.js文件。（建议选择js文件，json不可以写注释） 修改配置文件
主要是修改rules中的相关配置，具体可查看官方配置

/*! * https://eslint.bootcss.com/docs/rules/ * https://eslint.vuejs.org/rules/ * * - 0: off * - 1: warn * - 2: error */module.exports = {  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    }  },  globals: {    AMap: false,    AMapUI: false  },  extends: [    'plugin:vue/vue3-recommended',    'plugin:@typescript-eslint/recommended',    'prettier',    'plugin:prettier/recommended'  ],  rules: {    '@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': [      'error',      {        argsIgnorePattern: '^_',        varsIgnorePattern: '^_'      }    ],    'no-unused-vars': [      'error',      {        argsIgnorePattern: '^_',        varsIgnorePattern: '^_'      }    ],    'space-before-function-paren': 'off',    'vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing 对组件定义名称强制使用特定的大小    '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/script-setup-uses-vars': 'off',    'vue/html-self-closing': [      'error',      {        html: {          void: 'always',          normal: 'never',          component: 'always'        },        svg: 'always',        math: 'always'      }    ]  }}

Prettier的使用

安装依赖

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

这三个依赖分别是：

• - `prettier`：prettier插件的核心代码

• - `eslint-config-prettier`：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效

• - `eslint-plugin-prettier`：将prettier作为ESLint规范来使用

添加配置文件

在项目的根目录下创建`.prettierrc.js`文件，并添加如下配置

module.exports = {  printWidth: 120, // 换行字符串阈值  tabWidth: 2, // 设置工具每一个水平缩进的空格数  useTabs: false,  semi: false, // 句末是否加分号  vueIndentScriptAndStyle: true,  singleQuote: true, // 用单引号  trailingComma: 'none', // 最后一个对象元素加逗号  bracketSpacing: true, // 对象，数组加空格  jsxBracketSameLine: true, // jsx > 是否另起一行  arrowParens: 'always', // (x) => {} 是否要有小括号  requirePragma: false, // 不需要写文件开头的 @prettier  insertPragma: false // 不需要自动在文件开头插入 @prettier}

将Prettier添加到EsLint中

修改`.eslintrc.js`文件，在extends中增加

'prettier',    'plugin:prettier/recommended'

其中：

• - `prettier/@typescript-eslint`：使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范

• - `plugin:prettier/recommended`：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出

使用husky和lint-staged构建代码

安装依赖

npm i --save-dev husky lint-staged

修改package.json
添加以下代码

"husky": {        "hooks": {            "pre-commit": "lint-staged"        }    },    "lint-staged": {        "src*/**/*.ts": [            "prettier --config .prettierrc.js --write",            "eslint",            "git add"        ],        "src*/**/*.json": [            "prettier --config .prettierrc.js --write",            "eslint",            "git add"        ]    }

这样，在执行git commit时，EsLint会检查提交的代码。

增加setting.json配置

在.vscode文件夹中增加`setting.json`配置文件，用于自动保存时，自动修复及检验代码。

{  "typescript.tsdk": "./node_modules/typescript/lib",  "typescript.enablePromptUseWorkspaceTsdk": true,  "volar.tsPlugin": true,  "volar.tsPluginStatus": false,  //===========================================  //============= Editor ======================  //===========================================  "explorer.openEditors.visible": 0,  "editor.tabSize": 2,  "editor.defaultFormatter": "esbenp.prettier-vscode",  "diffEditor.ignoreTrimWhitespace": false,  //===========================================  //============= Other =======================  //===========================================  "breadcrumbs.enabled": true,  "open-in-browser.default": "chrome",  //===========================================  //============= files =======================  //===========================================  "files.eol": "\n",  "search.exclude": {    "**/node_modules": true,    "**/*.log": true,    "**/*.log*": true,    "**/bower_components": true,    "**/dist": true,    "**/elehukouben": true,    "**/.git": true,    "**/.gitignore": true,    "**/.svn": true,    "**/.DS_Store": true,    "**/.idea": true,    "**/.vscode": false,    "**/yarn.lock": true,    "**/tmp": true,    "out": true,    "dist": true,    "node_modules": true,    "CHANGELOG.md": true,    "examples": true,    "res": true,    "screenshots": true,    "yarn-error.log": true,    "**/.yarn": true  },  "files.exclude": {    "**/.cache": true,    "**/.editorconfig": true,    "**/.eslintcache": true,    "**/bower_components": true,    "**/.idea": true,    "**/tmp": true,    "**/.git": true,    "**/.svn": true,    "**/.hg": true,    "**/CVS": true,    "**/.DS_Store": true  },  "files.watcherExclude": {    "**/.git/objects/**": true,    "**/.git/subtree-cache/**": true,    "**/.vscode/**": true,    "**/node_modules/**": true,    "**/tmp/**": true,    "**/bower_components/**": true,    "**/dist/**": true,    "**/yarn.lock": true  },  "stylelint.enable": true,  "stylelint.packageManager": "yarn",  "liveServer.settings.donotShowInfoMsg": true,  "telemetry.enableCrashReporter": false,  "workbench.settings.enableNaturalLanguageSearch": false,  "path-intellisense.mappings": {    "/@/": "${workspaceRoot}/src"  },  "prettier.requireConfig": true,  "typescript.updateImportsOnFileMove.enabled": "always",  "workbench.sideBar.location": "left",  "[javascriptreact]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[typescript]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[typescriptreact]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[html]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[css]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[less]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[scss]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[markdown]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  },  "[vue]": {    "editor.codeActionsOnSave": {      "source.fixAll.eslint": false    }  },  "cSpell.words": [    "vben",    "windi",    "browserslist",    "tailwindcss",    "esnext",    "antv",    "tinymce",    "qrcode",    "sider",    "pinia",    "sider",    "nprogress"  ]}

到此，相信大家对"如何实现vue3+ts+EsLint+Prettier规范代码"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！