前言

本文记录前端项目的工程配置等

vue的eslint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 安装依赖
yarn add eslint eslint-plugin-vue babel-eslint @vue/cli-plugin-eslint -D
// 根目录新建 .eslintrc.js配置文件  .eslintignore忽略文件
// .eslintignore 配置
  build/*.js
  src/assets
  public
  dist
  
// .eslintrc.js 配置
/* 参考：https://eslint.bootcss.com/ */

module.exports = {
  /* 若目录中有多个.eslintrc，ESLint将自动在要检测它们，（父->根）
     直到找到root:true的eslintrc，它就会停止在父级目录中寻找，
     再将所有的.eslintrc合并（为当前项目约定一个规则） */
  "root": true,
  // 环境配置
  "env": {
    // 浏览器环境中的全局变量
    "browser": true,
    // Node.js 全局变量和 Node.js 作用域
    "node": true,
    // CommonJS全局变量和CommonJS作用域
    "commonjs": true,
    // 启用除模块之外的所有ECMAScript 6功能
    "es6": true
  },
  // 继承另一个配置文件的所有特性
  "extends": [
    "plugin:vue/essential", // 扩展（vue官方eslint配置插件 必不可少的）
    "eslint:recommended" // 启用一系列核心规则，这些规则报告一些常见问题
  ],
  // 解释器的配置
  "parserOptions": {
    "parser": "babel-eslint" // 解释器
  },
  // 配置规则
  "rules": {
  }
}

eslint的rules配置

  • 基础配置规则注意事项
  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
1
...

编辑器editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 编辑器配置文件 参考 http://editorconfig.org

root = true # 表⽰是最顶层的配置⽂件，发现设为true时，才会停⽌查找.editorconfig⽂件

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off # 最大行宽 填写number数值
trim_trailing_whitespace = false

vue的browserslist

掘金：browserslist介绍 浏览器的市场占有率：caniuse

browserslist 工具负责帮助我们查询当前条件匹配到的浏览器的信息，并把查询到的结果共享给所有的工具。

很多工具都需要占有率等浏览器信息（比如 autoprefixer、babel、postcss-preset-env 等等）进行使用。

1
2
3
4
5
// 根目录新建.browserslistrc 
// 其中rc指的是runtime compiler 表示其它工具在运行时编译的时候，会读取这个文件。
> 1%
last 2 versions
not dead

vue的babel

vue的postcss与autoprefixer

PostCSS是一个通过JavaScript来转换样式的工具（通过js代码来对样式做一些转换）

比如：自动添加浏览器前缀、css样式的重置

PostCSS 本身能做的事情非常少，要想实现某个功能，必须依赖为这个功能编写的对应的 PostCSS 插件

给样式添加前缀的插件——autoprefixer，Vue cli 默认开启了开启了autoprefixer

参考：postcss官网 VueCli-postcss

1
2
3
4
5
6
// 根目录新建.postcssrc.js
mudule.exports = {
  'plugins': {
    'autoprefixer': {} // VueCli 默认开启了autoprefixer
  }
}

代码格式化prettier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 安装 
yarn add prettier@2.2.1 eslint-plugin-prettier@3.3.1 @vue/eslint-config-prettier@6.0.0 --dev

// eslintrc.js的extends添加
extends: ["@vue/prettier"]

// 注意prettier安装会有版本之间的冲突

// 根目录新建.prettierrc
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

prettier配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  // prettier的配置
 "printWidth": 120, // 超过最大值换行
 "tabWidth": 4, // 缩进字节数
 "useTabs": false, // 缩进不使用tab，使用空格
 "semi": true, // 句尾添加分号
 "singleQuote": true, // 使用单引号代替双引号
 "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
 "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
 "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
 "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
 "endOfLine": "auto", // 结尾是 \n \r \n\r auto
 "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
 "htmlWhitespaceSensitivity": "ignore",
 "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
 "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
 "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
 "parser": "babylon", // 格式化的解析器，默认是babylon
 "requireConfig": false, // Require a 'prettierconfig' to format prettier
 "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
 "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
 "tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

默认的各个版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "name": "vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}