A VUe3 project created using Vite does not, by default, have the option of adding ESLint and prettier to a VUe3 project as vuUE cli does. You need to add ESLint and prettier to a VUe3 project

1. Initialize the project using Vite

Use NPM:

$ npm init vite@latest
Copy the code

Using Yarn:

$ yarn create vite
Copy the code

Select VUE as the framework

Select the vue – ts

2. Install eslint

In addition to installing ESLint we also need to install some common ESLint plugins

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
Copy the code

eslint-config-standard

eslint-plugin-import

eslint-plugin-node

eslint-plugin-promise

eslint-plugin-vue

typescript-eslint

3. The configuration eslint

Create.eslintrc.js in the project root directory

// eslint-define-config const {defineConfig} = require('eslint-define-config') const {defineConfig} = require('eslint-define-config') Module.exports = defineConfig({// ESLint will stop looking in the parent directory once it finds "root": true in the configuration file. Root: true, // Specify the runtime environment for the script. Each environment has a specific set of predefined global variables. Env: {browser: true, ES2021: true,}, extends: ['plugin:vue/vue3-recommended', 'standard',], parserOptions: Parser: '@typescript-eslint/parser', // Modular scheme sourceType: 'module',}, // References to plugins download plugins remove the eslint-plugin- prefix to introduce plugins: [' vue ', '@ typescript - eslint', 'import' and 'node', 'promise'], / / custom rules rules: {},})Copy the code

You can also create.eslintignore to configure which files or folders esLint will ignore

node_modules
.vscode
.idea
dist
/public
.eslintrc.js
Copy the code

4. Install prettier

npm i prettier -D
Copy the code

5. Configuration is prettier

Create.prettierrc.js in the project root directory

Module. exports = {// exports over 80 printWidth: 80, // semicolon: false, // singleQuote: TrailingComma: 'all',}Copy the code

More Configuration Items

You can also create.prettierIgnore to configure which files or folders the prettire ignores

In most cases. Prettierignore is configured the same as.eslintignore

6. Compatibility of ESLint and Prettier

npm i eslint-config-prettier -D
npm i eslint-plugin-prettier -D
Copy the code

eslint-config-prettier

eslint-plugin-prettier

Configuration. The eslintrc. Js

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

7. Solve vue3defineProps' 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',
  ],
  ...
})
​
Copy the code

\