【VScode】前端开发环境配置

[Samgao0312]

Tip: 本配置文档是假设你用的是mac前提，如果你用的是window系统，可能配置上会有区别，那么请自行研究，欢迎贡献完善本文档！

写在前面：
本文档只是从介绍 开发工具配置 上来统一代码风格和代码检测，目的是希望方便日后每个前端的小伙伴加入后参照该文档进行本地开发环境配置。而具体编码风格, 例如：
(1)、每行代码结束必须要有分号；（有没有是风格问题，我们希望这里能够统一）
(2)、使用 2空格（javascript使用2个空格，css使用4空格）缩进；
我们会在另外一个文档来对前端编码规范做详细说明。

开发工具配置

本文档 将对你的开发工具配置给出建议，目的是为了统一团队内的代码风格。
我们通过 Eslint、Prettier、Csscomb 三个插件配置来达到目的。

• Eslint 执行的是代码检测 与 格式化；
• Prettier 很单纯的孩子，只负责做代码的格式化工作；
• Csscomb: 我们使用它执行css、sass、less文件的格式化，这里包括样式声明顺序（目的是保证团队内样式风格的统一和易读性）；

javascript:

• 每行代码结束必须要有分号；（有没有是风格问题，我们希望这里能够统一）
• 适用 2空格（javascript两个空格，css是使用4空格）缩进；

Prettier 与 Eslint

两者区别

• Eslint 是代码质量工具，执行的是代码检测。（确保没有未使用的变量、没有全局变量，等等）
• Prettier 其实就是简单的代码格式工具。只关心格式化文件(最大长度、混合标签和空格、引用样式等)。

可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。

安装配置 Prettier

介绍

• Prettier 是一个规范代码格式的工具。它只能规范格式，并不具备 lint 那种语法检测的能力。
• 支持目前大多数的编程语言：包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown，这代表着， 我们几乎可以用一个工具都能搞定所有的代码格式化问题。

安装配置 与 使用

安装

在vscode 中直接搜 prettier，第一个就是，直接安装即可。

安装成功后， Idea 默认的格式化处理就会被prettier代替， 默认快捷键是alt + shift + f

配置

安装成功后， vscode 的设置选项中就会有 prettier 相关的配置节点。

在项目的根目录下，新建一个prettier 的配置文件，名为： .prettierrc, 内容如下：

{
  "tabWidth": 2,
  "singleQuote": true, //使用单引号
  "semi": true, // 句末加分号
  "trailingComma": "es5", //最后一个对象元素加逗号（[a,b,c,d,] 数组项d后面的逗号就是尾逗号）。可选项有none/es5/all
  "printWidth": 140, // 换行字符串阈值
  "arrowParens": "avoid", // (x) => {} 是否要有小括号
  "bracketSpacing": true, //对象，数组加空格
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ],
  "proseWrap": "preserve" // 是否要换行
}

之后，去设置文件下，添加或修改 "editor.formatOnSave": true, 意思是每次保存文件时执行格式话。

beautiful 插件 (现在已经不建议使用了！)

为什么用 beautiful 插件呢？因为我发现 prettier 对单独的 sass 文件没有格式化。。尼玛 奇怪了。所以，就引入 beautiful 这个插件，但是考虑到它格式化与prettier的格式化之间存在冲突覆盖，所以我们只用它来单独格式化特定的某几个文件 —— 如 css\sass\html 等（对的，这里限制来n beautiful 这个插件格式化的范围，目的是为了避免和 prettier 产生冲突）；

在设置中添加下面代码：

}
    ...
    "beautify.language": {
       "html": ["html", "htm"],
       "css": ["css", "scss"]
   }
   ...
}

Csscomb: 规范样式代码格式

安装 Csscomb。完了之后在用户设置下面添加如下代码：

    ....
    "csscomb.formatOnSave": true,
    "csscomb.preset": {}
    ....

"csscomb.preset": {} 这部分可以分两部分看，分别是排序规则——sort-order，和其他自定义规则。

** 其他规则： **

 "csscomb.preset": {
      "exclude": [
          ".git/**",
          "node_modules/**",
          "bower_components/**"
      ],
      "always-semicolon": true, //一直使用分号
      "block-indent": "    ", //缩进
      "color-case": "lower", //颜色值小写
      "color-shorthand": true,
      "element-case": "lower", //元素名小写
      "eof-newline": true,
      "leading-zero": false,
      "lines-between-rulesets": 1,  //不同分类的规则之间 加一行进行 分隔
      "quotes": "single", //使用单引号
      "remove-empty-rulesets": true, //自动删除空规则
      "space-after-colon": " ", // ':' 后两空格
      "space-after-combinator": " ",
      "space-after-opening-brace": "\n",
      "space-after-selector-delimiter": "\n",
      "space-before-closing-brace": "\n",
      "space-before-colon": "",
      "space-before-combinator": " ",
      "space-before-opening-brace": " ", // “{” 前使用一个空格
      "space-before-selector-delimiter": "",
      "space-between-declarations": "\n", // 每行只显示一条样式规则
      "strip-spaces": true,
      "unitless-zero": true,
      "vendor-prefix-align": true,
      "sort-order": [

第二部分： 排序规则以及呈现样式

有三种 排序规则 可选，可以在 https://github.com/csscomb/csscomb.js/tree/master/config 找到，选择一种自己喜欢的即可。

补充 - VsCode 插件设置

打开vscode工具的设置（快捷键 Ctrl + ,）里面有两个设置。

• USER SETTINGS（用户设置）： 也就是全局配置，其他项目也会应用这个配置。
• WORKSPACE SETTINGS（工作区设置）： 也就是项目配置，会在当前项目的根路径里创建一个.vscode/settings.json文件，然后配置只在当前项目生效。

ESLint 和 Prettier 的冲突修复

由于需要同时使用prettier和eslint，而prettier的一些规则和eslint的一些规则可能存在冲突，例如prettier字符串默认是用双引号而esLint定义的是单引号的话这样格式化之后就不符合ESLint规则了。

所以要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则，直接覆盖掉，ESLint和Prettier的配置文件内容如下：

.eslintrc.js
配置使用单引号、结尾不能有分号。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.prettierrc

配置使用单引号、结尾不能有分号。

{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}

也可以直接在vscode工作区配置prettier:

{
    //开启 eslint 支持
    "prettier.eslintIntegration": true,
    //使用单引号
    "prettier.singleQuote": true,
    //结尾不加分号
    "prettier.semi": false,
}