vue3中加入eslint和prettier

 原文链接

通过 vite 创建的 vue3 项目默认并没有像 vue-cli 一样可以选择加入eslint和prettier，需要自己手动加入，这里记录一下在项目配置eslint和prettier 的过程

1. 先使用vite初始化项目

使用 NPM:

$ npm init vite@latest
复制代码

使用 Yarn:

$ yarn create vite
复制代码

选择vue 作为 framework

选择 vue-ts

2. 安装 eslint

除了安装eslint之外我们还要安装一些常用的 eslint plugin

npm i eslint -D
npm i eslint-config-standard -D
npm i eslint-plugin-import -D
npm i eslint-plugin-node -D
npm i eslint-plugin-promise -D
npm i eslint-plugin-vue -D
npm i @typescript-eslint/eslint-plugin -D
npm i @typescript-eslint/parser -D
npm i eslint-define-config -D
复制代码

eslint-config-standard

eslint-plugin-import

eslint-plugin-node

eslint-plugin-promise

eslint-plugin-vue

typescript-eslint

3. 配置 eslint

在项目根目录创建 .eslintrc.js

// .eslintrc.js
​
// eslint-define-config可以帮助我们做语法提示
const { defineConfig } = require('eslint-define-config')
​
module.exports = defineConfig({
  // ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
  env: {
    browser: true,
    es2021: true,
  },
  // 启用的规则
  extends: [
    'plugin:vue/vue3-recommended',
    'standard',
  ],
  parserOptions: {
    // js的版本
    ecmaVersion: 13,
    // 解析器
    parser: '@typescript-eslint/parser',
    // 模块化方案
    sourceType: 'module',
  },
  // 引用的插件  下载的插件去掉eslint-plugin-前缀引入
  plugins: ['vue', '@typescript-eslint', 'import', 'node', 'promise'],
  // 自定义规则
  rules: {},
})
复制代码

同时可以创建 .eslintignore 来配置eslint需要忽略哪些文件或者文件夹

node_modules
.vscode
.idea
dist
/public
.eslintrc.js
复制代码

4. 安装 prettier

npm i prettier -D
复制代码

5. 配置 prettier

在项目根目录创建 .prettierrc.js

module.exports = {
  // 超过80就换行
  printWidth: 80,
  // 不适用分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的最后一项加逗号
  trailingComma: 'all',
}
复制代码

更多配置项

同时可以创建 .prettierignore 来配置prettire需要忽略哪些文件或者文件夹

大部分情况下 .prettierignore 和 .eslintignore 配置一样

6. 解决 eslint 和 prettier 的兼容问题

npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D
复制代码

eslint-config-prettier

eslint-plugin-prettier

配置 .eslintrc.js

const { defineConfig } = require('eslint-define-config')
​
module.exports = defineConfig({
  ...
  extends: [
    'plugin:vue/vue3-recommended',
    'standard',
+   'prettier',
+   'plugin:prettier/recommended',
  ],
  ...
})
复制代码

7. 解决vue3 defineProps' is not defined.

const { defineConfig } = require('eslint-define-config')
​
module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
  extends: [
    'plugin:vue/vue3-recommended',
    'standard',
    'prettier',
    'plugin:prettier/recommended',
  ],
  ...
})
​
复制代码

\

作者：奇犽z
链接：https://juejin.cn/post/7021464780242321439
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。