npm包esformatter-dot-notation使用教程

当我们进行JavaScript编码时，我们经常会遇到各种不同的编码风格和格式。这就是为什么有许多工具可以帮助我们自动化代码风格和格式配置的原因之一。其中一个这样的工具是npm包esformatter-dot-notation。

什么是esformatter-dot-notation？

esformatter-dot-notation是一个可以通过命令行或作为npm脚本使用的工具，它可以自动将您的JavaScript代码中的对象属性访问符号.转换为中括号访问符号[]。

例如，以下代码：

var obj = {
  prop1: 'value1',
  prop2: 'value2'
};

console.log(obj.prop1, obj.prop2);

使用esformatter-dot-notation后，变成：

var obj = {
  prop1: 'value1',
  prop2: 'value2'
};

console.log(obj['prop1'], obj['prop2']);

安装esformatter-dot-notation

安装esformatter-dot-notation很简单，只需在您的项目文件夹中运行以下命令：

npm install --save-dev esformatter-dot-notation

使用esformatter-dot-notation

在安装esformatter-dot-notation后，可以通过ESFormatter来使用它。要使用ESFormatter，请执行以下步骤：

1. 创建.esformatter文件：

在项目根目录下创建一个名为.esformatter的空文件，然后添加以下内容：

{
  "plugins": [
    "esformatter-dot-notation"
  ],
  "dotNotation": {
    "forceQuotes": false
  }
}

1. 添加ESFormatter配置到package.json

在package.json中添加以下内容：

"esformatter": {
  "plugins": [
    "esformatter-dot-notation"
  ]
}

1. 运行ESFormatter

现在您可以运行ESFormatter，它将自动使用esformatter-dot-notation插件。

为了演示这一点，下面是一个命令行的例子：

esformatter ./src/**/*.js --write

这个命令将格式化./src/目录下所有.js文件，并覆盖原始文件。

配置项

esformatter-dot-notation有几个可用于配置的选项。

forceQuotes

默认情况下，esformatter-dot-notation会尝试将不需要引号的属性名称转换为没有引号的中括号访问符号。但是，如果您希望强制在所有情况下使用引号，则可以将此选项设置为true。

例如，这个配置：

{
  "plugins": [
    "esformatter-dot-notation"
  ],
  "dotNotation": {
    "forceQuotes": true
  }
}

将把以下代码：

var obj = {
  prop: 'value'
};

console.log(obj.prop);

转换为：

var obj = {
  prop: 'value'
};

console.log(obj['prop']);

includeRegex

使用这个选项，您可以指定一个正则表达式，告诉esformatter-dot-notation只转换匹配该正则表达式的对象属性访问符号。

例如，以下配置：

{
  "plugins": [
    "esformatter-dot-notation"
  ],
  "dotNotation": {
    "includeRegex": "^myPrefix"
  }
}

将把以下代码：

var obj = {
  myPrefixProp1: 'value1',
  prop2: 'value2'
};

console.log(obj.myPrefixProp1, obj.prop2);

转换为：

var obj = {
  myPrefixProp1: 'value1',
  prop2: 'value2'
};

console.log(obj['myPrefixProp1'], obj.prop2);

excludeRegex

使用这个选项，您可以指定一个正则表达式，告诉esformatter-dot-notation不要转换匹配该正则表达式的对象属性访问符号。

例如，以下配置：

{

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/45451) ，转载请注明来源
[https://www.javascriptcn.com/post/45451](https://www.javascriptcn.com/post/45451)