2022 Vite vue3 EsLint超简单配置 按步骤完成即可

admin • • 杂文

今天又重启了一个项目是VUE3的，就搭配了vite，在使用vue-cli创建项目时，会有ESLINT选择的，会自动给配置好，vite创建项目很简单，没有ESLINT的配置，要手动配置。跟着步骤来即可，很简单

1、使用vite创建一个项目
npm create vite@latest
> Project name: 项目名称
> Select a framework: 选择框架 选择vuejs
> Select a variant：选择vue

Done. Now run:

  cd 项目名称
  npm install
  npm run dev
2、安装EsLint
 npm i -D eslint
3、初始化配置EsLint
npx eslint --init
  1. 选择模式： To check syntax, find problems, and enforce code style 严格模式
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ... 
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
  1. 选择语言模块：选择javascript
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  1. 选择语言框架 选择vue.js
? Which framework does your project use? ...
  React
> Vue.js
  None of these
  1. 是否使用ts，视自己情况而定，我这里不用 选择的No
 ? Does your project use TypeScript? » No / Yes
  1. 代码在哪里运行 使用空格键全选 浏览器+node
? Where does your code run? ...  (Press  to select,  to toggle all,  to invert selection)
√ Browser
√ Node
  1. 选择一个风格：选择流行的即可
? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
  1. 你想遵循哪一种风格指南? 选择 Standard 我一直用的这个社区指南，感觉很好。认可度也高
? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
  1. 您希望您的配置文件是什么格式? 选择js即可
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
  1. 可能会出现下面的提示，选择yes即可
? The style guide "standard" requires eslint@^7.12.1. You are currently using [email protected].
  Do you want to downgrade? » No / Yes
  1. 会问你是用npm安装还是yarn安装，视自己情况而定，我这里选择的npm(yes)
? Would you like to install them now with npm? » No / Yes
4. 安装完成后，在项目根目录会出现.eslintrc.js文件
// .eslintrc.js 文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}
5. 继续安装vite-plugin-eslint
 npm i -D vite-plugin-eslint
6. 在package.json文件中添加： "@babel/eslint-parser": "^7.17.0"（我忘了npm的安装名了~）
// package.json 文件
"devDependencies": {
    ...
    "@babel/eslint-parser": "^7.17.0"
  }
7. 执行npm install
npm install
8. 配置vite.config.js文件
// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    // 添加下面这块
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
}
9. 配置.eslintrc.js文件
// .eslintrc.js 文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'standard',
    // 新增这里vue3支持
    'plugin:vue/vue3-recommended'
  ],
  // 这是初始生成的 将其中的内容更改为下面的
  // parserOptions: {
  //   ecmaVersion: 'latest',
  //   sourceType: 'module'
  // },

  // 新的内容
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      modules: true
    },
    requireConfigFile: false,
    parser: '@babel/eslint-parser'
  },
  plugins: [
    'vue'
  ],
  rules: {
    semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
    'no-var': 'error', // 禁止使用 var
    indent: ['error', 2], // 缩进2格
    'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
    quotes: [2, 'single'] // 使用单引号
    'vue/html-closing-bracket-newline': 'off', // 不强制换行
    'vue/singleline-html-element-content-newline': 'off', // 不强制换行
    'vue/max-attributes-per-line': ['error', {
      singleline: { max: 5 },
      multiline: { max: 5 }
    }] // vue template模板元素第一行最多5个属性
    // 其它的规则可以去eslint查看，根据自己需要进行添加
  }
}

按着步骤操作就可以把eslint配置完成，vscode与webstorm的eslint支持很好设置，如果没设置过的可以去搜一下，文章很多，就不在这里多说了。

希望对有需要的朋友有所帮助.

版权声明：
作者：admin
链接：https://www.techfm.club/p/43051.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>