加载中...

给nuxt3添加 ESLint 和 Prettier

前言

在这篇文章中,我们将介绍ESLint和Prettier,用于在Nuxt 3项目中自动设置代码样式格式。

配置自动设置代码样式有这些好处:

  1. 一致性:自动执行某种风格。特别是在代码审查中避免吹毛求疵的论点。
  2. 节省时间:无需手动格式化代码。
  3. 代码质量:捕捉代码中的潜在问题,例如语法错误和编码风格冲突。

正文

安装依赖

# ESLint
yarn add --dev eslint

# Prettier
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

# TypeScript support
yarn add --dev typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript

配置

将以下规则添加到ESLint配置(.eslintrc.cjs):

// .eslintrc.cjs

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
  plugins: [],
  rules: {},
}

将以下规则添加到Prettier配置(.prettierrc.cjs):

module.exports = {
  /*打印宽度,超过后,会将属性换行*/
  printWidth: 120,
  /*禁止使用尾随逗号,对象和数组最后一个逗号去掉*/
  trailingComma: "none",
  /*在对象字面量中的括号之间添加空格*/
  bracketSpacing: true,
  /*使用单引号而不是双引号来定义字符串*/
  singleQuote: true,
  /*当箭头函数只有一个参数时,省略参数前后的括号*/
  arrowParens: "avoid",
  /*script和style标签中间的内容缩进*/
  vueIndentScriptAndStyle: true,
  // 将>多行 HTML(HTML、JSX、Vue、Angular)元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭合元素
  bracketSameLine:false
};

添加脚步命令

// package.json

{
  // ...
  "scripts": {
    // ...
    "lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
    // ...
  }
  // ...
}

补充

这里强烈建议给项目增加一个 .editorconfig 文件,可以约束代码编辑器的基本规则

// .editorconfig  文件
# http://editorconfig.org
root = true

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

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

参考:https://dev.to/tao/adding-eslint-and-prettier-to-nuxt-3-2023-5bg
以和为贵!让 ESlint、Prettier 和 EditorConfig 互不冲突

posted @ 2024-01-14 19:56  水车  阅读(539)  评论(0编辑  收藏  举报