webstorm+vue+esLint+pretter配置

为了是代码更有美观和统一性， 我们要使用 esLint 来检查代码，我们要使用 pretter来格式化代码， 同时为了我们方便的应用操作， 我们还要对 webStorm 进行适当的配置

安装 esLint

我们这里是安装esLint 8版本的为例， 9版本的请自行解决

安装 v8 版本（注意不要装 @eslint/js）
npm install eslint@8.57.1 eslint-plugin-vue@9 --save-dev

安装完成之后， 不要运行 npx eslint --init 这样会生成9版本的配置文件，无解

安装完之后， 我们手动的创建 .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended' // 新增这一行！  注意这里的一行是安装 pretter之后才加上的，刚开始的时候没有这一行
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  plugins: ['vue'],
  globals: {
    uni: 'readonly',
    wx: 'readonly',
    getApp: 'readonly',
    getCurrentPages: 'readonly'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': 'error' // 强制开启 Prettier 格式校验   这里也是安装了pretter之后才加上的
  },
   ignorePatterns: [
    'dist/',
    'node_modules/',
    'unpackage/',
    '**/*.min.js'
  ]
}

安装pretter 同时安装 pretter 和 eslint 配合的插件， 因为如果pretter 和 esLint 各自单独运行的话，可能会出现不可预知的错误

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

安装完成之后，手动创建 pretter 的配置文件 .prettierrc.js

module.exports = {
  semi: false,           // 不加分号
  singleQuote: true,     // 使用单引号
  tabWidth: 2,           // 缩进2空格
  trailingComma: 'none', // 不加末尾逗号
  printWidth: 100,       // 一行最大长度
  bracketSpacing: true,  // 对象括号间加空格
  arrowParens: 'avoid'   // 箭头函数单个参数不加括号
}

手动创建 pretter 的忽略文件 .prettierignore

# 构建产物
dist/
unpackage/
node_modules/

# 配置文件
package-lock.json
yarn.lock
pnpm-lock.yaml

# 静态资源
*.png
*.jpg
*.jpeg
*.gif
*.svg
*.ico
*.woff
*.woff2
*.ttf

# 其他
*.min.js
*.log
.gitignore
.eslintignore

以上是 eslint 和 pretter 的安装与配置完成，如果是这样，就还要使用命令行来操作， 我们使用的 webStorm 可以更加方便的设置文件在保存的时候， 自动进行检查， 下面是对webStrom 的配置 在webstorm 的 设置（setting） ->工具(tools)->保存时的操作(action on save) 勾选 重新设置代码格式， 优化import, 运行 eslint --fix

同时要配置这两个 自动

以上就是 webstorm 中的配置