前端配置package.json babel eslint

这里说的前端配置依赖nodejs
我一般会选择github上的最佳项目实践，将其配置应用到自己的项目中。如果需要自定义配置，就根据package.json的配置项对号入座。

本地开发命令配置

script: {
  "start": "server-framework serve", // 启动本地开发环境服务【根据使用的框架配置】
  "test": "test-framework test", // 执行前端测试
  "build": "build-tool build", // 项目打命令
  "lint": "lint-tool lint", //代码检查命令
   ... //以上是常用的几个命令，其它命令依据项目情况再配置
}

配置项目依赖

应用在生产环境的依赖库
手动编辑dependencies项

dependencies: {
"xxx": "versionxx"
}

或

npm install xx  [--save-prod]

本地开发环境或测试环境的依赖库，比如：build项目的依赖包，代码检查工具eslint，编译工具 babel less-loader等
手动编辑devDpendencies项：

devDependencies: {
"xxx": "versionxx"
}

或

npm install xx --save-dev

手动编辑dependency之后，执行命令：

npm install

install之后，本地的node_module文件夹下会出现安装的依赖包。（node_modules模块只在开发环境中想要，所以不需要提交到生产环境）

babel编译配置

随着es6+和typescript在开发中使用越来越广泛，鉴于es6+的浏览器的兼容性并没有普及，所以需要借助一些编译工具将es6+或typescript的语法编译成javascript。这里介绍常用的babel编译器
前提：项目需要安装babel相关的库(根据项目使用框架而定)

在项目根目录下创建babel.config.js 或babel.config.json，内容如下

// js
module.exports = {
  presets: [...], //值设置参考babel官网的
  plugins: [...]
}

// json
{
  "presets": [...],
  "plugins": [...]
}

或

在项目根目录下创建名为 .babelrc.json 的文件

{
   "presets": [...],
   "plugins": [...]
}

或

将.babelrc.json的内容作为package.json的babel配置项的内容

// package.json
{
   "script": {...},
    ...
   "babel": {
      "presets": ["@babel/preset-env"], // 插件集合
      "plugins": [...] // 指定插件
   }
}

高阶配置参考babel官网options

eslint配置

eslint工具是为了保证代码的一致性和避免一些语法错误。
在开发环境安装eslint
执行eslint --init 命令选择要使用的配置文件格式：js/json/yaml
或手动创建对应的配置文件
eslint主要的配置项主要是以下三类：

Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
Globals - 脚本在执行期间访问的额外的全局变量。
Rules - 启用的规则及其各自的错误级别。

在项目根目录下创建.eslintrc.js 或 .eslintrc.json 或 .eslintrc.yaml，内容如下

// js: 以ts语法为例的配置
module.exports = {
  extends: ['airbnb-typescript'], //
  rules: {
    'no-undef': 'off',
    'import/prefer-default-export': 'off',
    'func-names': 'off',
    ...
  },
  parserOptions: {
    project: './tsconfig.json',
  },
  globals: {
    ...
  } //配置全局变量
};

// json：以es6语法为例的配置
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    },
    ...
}

或

将.eslintrc.json的内容作为package.json的eslintConfig配置项的内容(以vue项目为例)

// package.json
{
   "script": {...},
    ...
   "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
     },
    ...
   }
}

或

在代码里通过注释实现eslint规则(rules)设置

/* eslint eqeqeq: "off", curly: "error" */

注：同一个目录下有多个配置文件，eslint只会使用一个，优先级顺序如下
.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json
具体配置项的含义参考eslint高级配置

额外加一个项目代码风格配置【不仅仅适用于前端】

代码风格配置：.editorconfig

维护多人开发的项目的代码风格一致性。【多人开发可能使用不同的开发工具，配置的代码风格可能不一致】
常见的代码风格设置有：缩进文档编码格式文档结尾是否有空行
根据项目框架和文档类型自定义配置。
用法：在项目根目录下创建.editorconfig文件

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
...