配置项目规范editorconfig+eslint+prettier

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

.editorconfig

  1. root = true
  2. # 说明
  3. # 设置文件编码为 UTF-8
  4. # 用两个空格代替制表符
  5. # 控制缩进大小
  6. # 在保存时删除尾部的空白字符
  7. # 在文件末尾添加一个空白行
  9. [*]
  10. charset = utf-8
  11. indent_style = space
  12. indent_size = 2
  13. trim_trailing_whitespace = true
  14. end_of_line = lf
  15. insert_final_newline = true
  17. [*.md]
  18. trim_trailing_whitespace = false

eslint 配置注意点

  1. 安装eslint :::success npm install eslint -D or yarn add eslint :::

  2. 配置.eslintrc.js

    1. module.exports = {
    2. root: true,
    3. env: {
    4.  browser: true, // browser global variables
    5.  es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
    6.  node: true,
    7. },
    8. parserOptions: {
    9.  sourceType: 'module',
    10.  ecmaVersion: 12,
    11. },
    12. rules: {
    13.  semi: ['error', 'never'],
    14.  quotes: ['error', 'single']
    15. }
    16. }

    当配置完上面选项，在src下面新建一个index.js（ts也是可以的）使用双引号，结尾加分号就会有红色的提示，如果eslint 没有生效，重启一下vscode
    vite+vue3+ts+pinia+element-plus搭建项目（四） - 图1
    然后我们使用下面的命令校验，控制台就会打印出提示 :::success npx eslint src/index.js ::: vite+vue3+ts+pinia+element-plus搭建项目（四） - 图2
    然后使用下面的命令,不符合规则的代码就被修复了 :::success npx eslint —fix src/index.js ::: vite+vue3+ts+pinia+element-plus搭建项目（四） - 图3
    注意： 我们使用npx测试eslint的时候可以不用在vscode安装eslint插件，但是我们总不能每次写完代码都要手动去执行npx eslint … 这样效率也太低了，所以需要安装eslint插件，并且配置setting.json （ctrl+shift+p打开），保存后就可以修复我们的代码 ```javascript { // 保存自动修复 “editor.codeActionsOnSave”: {

    1.  "source.fixAll.eslint": true

    }, }

  1. 此时js，ts都可以进行校验了，我们再测试vue文件里面是否也可以进行校验,进入文件发现文件名已经变红了，说明有错误，鼠标放到script标签上提示Parsing error: Unexpected token <eslint> ，这是因为eslint默认不支持对vue校验，需要安装对应的插件 eslint-plugin-vue
  2. :::success
  3. npm install eslint-plugin-vue or yarn add eslint-plugin-vue
  4. :::
  5. .eslintrc.js 中添加
  6. ```javascript
  7. module.exports = {
  8.   root: true,
  9.   env: {
  10.     browser: true,
  11.     es2021: true,
  12.     node: true,
  13.   },
  14.   parserOptions: {
  15.     sourceType: 'module',
  16.     ecmaVersion: 12,
  17.   },
  18.   extends: ['plugin:vue/vue3-recommended'],
  19.   rules: {
  20.     semi: ['error', 'never'],
  21.     quotes: ['error', 'single']
  22.   }
  23. }

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

  1. 到目前为止我们使用的校验规则是eslint默认和我们自己配置的规则，为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的Airbnb规范， :::success npm install eslint-config-airbnb-base -D or yarn add eslint-config-airbnb-base -D ::: ```javascript 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’] } }
  1. <a name="ZLNtV"></a>
  2. ### vue3+ts 项目中如何对ts文件以及vue文件进行校验
  3. :::success
  4. yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier -D
  5. :::
  6. 注意：如果配置好了，但是没有生效，重启vscode
  7. ```javascript
  8. // .eslintrc.js
  9. module.exports = {
  10.   plugins: ['@typescript-eslint'],
  11.   // Prerequisite `eslint-plugin-vue`, being extended, sets
  12.   // root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
  13.   // in turn delegates to the parser, specified in `parserOptions.parser`:
  14.   // https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
  15.   parserOptions: {
  16.     parser: require.resolve('@typescript-eslint/parser'),
  17.     extraFileExtensions: ['.vue'],
  18.   },
  19.   extends: [
  20.     'plugin:vue/vue3-essential',
  21.     'plugin:@typescript-eslint/eslint-recommended',
  22.     'prettier',
  23.     'plugin:prettier/recommended',
  24.   ],
  25.   overrides: [
  26.     {
  27.       files: ['*.ts', '*.tsx', '*.vue'],
  28.       rules: {
  29.         // The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
  30.         // does not work with type definitions
  31.         'no-unused-vars': 'off',
  32.         semi: ['error', 'never'],
  33.       },
  34.     },
  35.   ],
  36. }
  1. .prettierrc.js
  2. module.exports = {
  3.   useTabs: false,
  4.   tabWidth: 2,
  5.   printWidth: 120,
  6.   singleQuote: true,
  7.   semi: false,
  8.   trailingComma: 'none',
  9.   bracketSpacing: true,
  10.   endOfLine: 'auto',
  11.   ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  12. }

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