vite+vue3+ts+pinia+element-plus搭

配置项目规范editorconfig+eslint+prettier

详细介绍可以看一下这篇文章代码规范之-理解ESLint、Prettier、EditorConfig (baidu.com)

.editorconfig

root = true
# 说明
# 设置文件编码为 UTF-8
# 用两个空格代替制表符
# 控制缩进大小
# 在保存时删除尾部的空白字符
# 在文件末尾添加一个空白行

[*]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

eslint 配置注意点

1. 安装eslint

npm install eslint -D or yarn add eslint

2. 配置.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true, // browser global variables
    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

当配置完上面选项，在src下面新建一个index.js（ts也是可以的）使用双引号，结尾加分号就会有红色的提示，如果eslint 没有生效，重启一下vscode

image.png

然后我们使用下面的命令校验，控制台就会打印出提示

npx eslint src/index.js

image.png

然后使用下面的命令,不符合规则的代码就被修复了

npx eslint --fix src/index.js

image.png

注意： 我们使用npx测试eslint的时候可以不用在vscode安装eslint插件，但是我们总不能每次写完代码都要手动去执行npx eslint ... 这样效率也太低了，所以需要安装eslint插件，并且配置setting.json （ctrl+shift+p打开），保存后就可以修复我们的代码

{
    // 保存自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

此时js，ts都可以进行校验了，我们再测试vue文件里面是否也可以进行校验,进入文件发现文件名已经变红了，说明有错误，鼠标放到script标签上提示Parsing error: Unexpected token <eslint> ，这是因为eslint默认不支持对vue校验，需要安装对应的插件 eslint-plugin-vue

npm install eslint-plugin-vue or yarn add eslint-plugin-vue

.eslintrc.js 中添加

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  extends: ['plugin:vue/vue3-recommended'],
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

现在eslint 校验对vue文件已经起作用了，注意如果代码有报错，eslint不会工作，

3. 到目前为止我们使用的校验规则是eslint默认和我们自己配置的规则，为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的Airbnb规范，

npm install eslint-config-airbnb-base -D or yarn add eslint-config-airbnb-base -D

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 12,
  },
  extends: ['plugin:vue/vue3-recommended','airbnb-base'],
  rules: {
    semi: ['error', 'never'],
    quotes: ['error', 'single']
  }
}

vue3+ts 项目中如何对ts文件以及vue文件进行校验

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier -D

注意：如果配置好了，但是没有生效，重启vscode

// .eslintrc.js
module.exports = {
  plugins: ['@typescript-eslint'],
  // Prerequisite `eslint-plugin-vue`, being extended, sets
  // root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
  // in turn delegates to the parser, specified in `parserOptions.parser`:
  // https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
  parserOptions: {
    parser: require.resolve('@typescript-eslint/parser'),
    extraFileExtensions: ['.vue'],
  },
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/eslint-recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.vue'],
      rules: {
        // The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
        // does not work with type definitions
        'no-unused-vars': 'off',
        semi: ['error', 'never'],
      },
    },
  ],
}

.prettierrc.js
module.exports = {
  useTabs: false,
  tabWidth: 2,
  printWidth: 120,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  bracketSpacing: true,
  endOfLine: 'auto',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
}

此时就完成了eslint+prettier配置，还是有冲突的地方，需要按需修改