# nuxt 配置 eslint 和 prettier

# 安装依赖

npm i eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier @nuxtjs/eslint-module -D

如果是 typescript 的，还需要安装

npm i @nuxtjs/eslint-config-typescript -D

# 添加配置

1. eslint 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended', 'plugin:nuxt/recommended'],
  plugins: [],
  // add your custom rules here
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        useTabs: false,
        singleQuote: true,
        semi: true,
        trailingComma: 'all',
        arrowParens: 'avoid',
        htmlWhitespaceSensitivity: 'ignore',
      },
    ],
  },
};

2. 可选添加 .eslintignore

3. prettier 配置

// .prettierrc
{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore"
}

4. 增加 script 脚本

{
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .eslintignore .",
    "lint:fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .eslintignore ."
  }
}

# prettier 配置选项说明

# 1、Print Width ： 单行代码的最大宽度

指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行。

如果在格式化 Markdown 时不想要换行，可以设置 Prose Wrap （是否换行） 选项以禁用它。

# 2、Tab Width ： 设置代码每一个水平缩进的空格数

# 3、Tabs ：使用tab（制表位）缩进而非空格

# 4、Semicolons ： 在语句末尾添加分号

参数含义：

• true - 在每一条语句后面添加分号
• false - 只在有可能导致ASI错误的行首添加分号

# 5、Quotes： 使用单引号而非双引号

在JSX语法中，所有引号均为双引号，该设置在JSX中被自动忽略

在字符串中，如果一种引号在数量上超过另一种引号，数量少的引号，将被用于格式化字符串；示例："I 'm double quoted " 被格式化后是："I 'm double quoted "

# 6、Quote Props：

参数含义：

• “as-needed” - 仅在需要时在对象属性周围添加引号
• “consistent” - 如果对象中的至少一个属性需要加引号，就对所有属性加引号
• “preserve” - 按照对象属性中引号的输入用法

# 7、JSX Quotes：在JSX中使用单引号

# 8、Trailing Commas：在任何可能的多行中输入尾逗号

参数：

• none - 无尾逗号
• es5 - 添加es5中被支持的尾逗号
• all - 所有可能的地方都被添加尾逗号

对 git diff 友好，减少可能的影响

# 9、Bracket Spacing： 括号空格

有效参数：

• true - 格式化结果为 : { foo: bar }
• false - 格式化结果为 : {foo: bar}

# 10、JSX Brackets： 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）

有效参数：

• true - 格式化结果为 :

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - 格式化结果为 :

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

# 11、Arrow Function Parentheses：为单行箭头函数的参数添加圆括号 (适用于v1.9.0+)

有效参数：

• true - 格式化结果为 : x => x
• false - 格式化结果为 : (x) => x

# 12、Range：只格式化某个文件的一部分

这两个参数可以用于从指定起止偏移字符(单独指定开始或结束、两者同时指定、分别指定)格式化代码。

以下情况，范围将会扩展：

• 回退至包含选中语句的第一行的开始
• 向前直到选中语句的末尾 注意：这些参数不可以同cursorOffset共用；

# 13、Parser：指定使用哪一种解析器

Prettier会自动从输入文件路径推断出解析器，因此不必更改此设置。

babel和flow解析器都支持相同的JavaScript功能集（包括Flow类型注释）。 在某些情况下它们可能会有所不同，因此，如果遇到其中一种情况，可以尝试使用flow代替babel。 typescript和babel-ts几乎相同。 babel-ts可能支持TypeScript尚不支持的JavaScript功能（建议），但与无效的代码相比，它的宽松性较低，并且比typescript分析器少了经过测试的考验。

参数及支持的版本：

• "babel" v1.16.0+
• "babel-flow" v1.16.0+
• "babel-ts" v2.0.0+
• "flow"
• "typescript" v1.4.0+
• "css" v1.7.1+
• "scss" v1.7.1+
• "less" v1.7.1+
• "json" v1.5.0+
• "json5" v1.13.0+
• "json-stringify" v1.13.0+
• "graphql" v1.5.0+
• "markdown" v1.8.0+
• "mdx" v1.15.0+
• "html" v1.15.0+
• "vue" v1.10.0+
• "angular" v1.15.0+
• "lwc" v1.17.0+
• "yaml" v1.14.0+

# 14、File Path： 指定文件的输入路径，这将被用于解析器参照

示例：使用postcss解析器

cat foo | prettier --stdin-filepath foo.css

# 15、Require pragma：严格按照文件顶部的一些特殊的注释格式化代码 （适用于v1.7.0+）

例如，当提供了--require-pragma时，具有以下内容作为其第一注释的文件将被格式化

/**
 * @prettier
 */

/**
 * @format
 */

# 16、Insert Pragma：在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了 （适用于v1.8.0+）

在使用 --require-pragma参数处理一连串的文件时这个功能将十分有用。

如果文件顶部已经有一个doclock，这个选项将新建一行注释，并打上@format标记。

# 17、Prose Wrap：文本样式进行折行（使用于v1.8.2+）

默认情况下，Prettier会因为使用了一些折行敏感型的渲染器（如GitHub comment 和 BitBucket）而按照markdown文本样式进行折行。

但在某些情况下，可能只是希望这个文本在编译器或查看器中当屏幕放不下时发生软折行，所以这一参数允许设置为 "never"

有效参数：

• "always" - 当超出print width（上面有这个参数）时就折行
• "never" - 不折行
• "perserve" - 按照文件原样折行 （v1.9.0+）

# 18、HTML Whitespace Sensitivity：（适用于v1.15.0+）

有效参数：

• "css" - 遵守CSS显示属性的默认值
• "strict" - 空格被认为是敏感的
• "ignore" - 空格被认为是不敏感的

大概是因为行内元素间换行了会显示空格。

关于这个字段的配置，更多请参考：https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

# 19、Vue files script and style tags indentation：缩进Vue文件中

有效参数：

• false - 不缩进Vue文件中的脚本和样式标签
• true - 缩进Vue文件中的脚本和样式标签

# 20、End of Line：设置统一的行结尾样式（适用于v1.15.0+）

有效参数：

• "lf" – 仅换行（\n），在Linux和macOS以及git repos内部通用
• "crlf" - 回车符+换行符（\r \n），在Windows上很常见
• "cr" - 仅回车符（\r），很少使用
• "auto" - 保持现有的行尾（通过查看第一行后的内容对一个文件中的混合值进行归一化）

由于历史原因，文本文件中存在两种常见的行尾样式。 即\n（对于换行，为LF）和\r \n（对于回车+换行，为CRLF）。前者在Linux和macOS上很常见，而后者在Windows上很普遍。

当人们使用不同的操作系统在一个项目上进行协作时，很容易在共享的git存储库中以混合的行结尾来结束。 Windows用户也可能会意外地将先前提交的文件中的行尾从LF更改为CRLF。 这样做会产生较大的git diff，从而使文件（git blame）的逐行历史记录更加难以浏览。

使用\n（LF）时，所有操作系统中的所有现代文本编辑器均能够正确显示行尾。 但是，用于Windows的旧版本的记事本会在视觉上将此类行压缩为一条，因为它们只能处理\r \n（CRLF）。

# 参考

• 使用prettier统一编码风格 (opens new window)