规范IDE开发工具

EditorConfig 统一编辑器规范

EditorConfig 助于为跨越各种编辑器和IDE的同一项目的多人开发维护统一的编码样式。

项目使用 `.editorconfig`

# https://editorconfig.org/
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

执行顺序：自上而下
**

配置项介绍

1.**root <blooean>**

是否是顶级配置文件，设置为true的时候才会停止搜索.editorconfig文件

2.**charset <"latin" | "utf-8" | "utf-8-bom" | "utf-16be" | "utf-16le">**

编码格式

3.**indent_style <"tab" | "space">**

缩进方式

4.**indent_size <number>**
缩进大小
5.**end_of_line <"lf" | "cr" | "crlf">**

换行符类型

cr：Carriage Return，对应ASCII中转义字符\r，表示回车
lf：Linefeed，对应ASCII中转义字符\n，表示换行
crlf：Carriage Return & Linefeed，\r\n，表示回车并换行

6.**insert_final_newline <blooean>**

是否让文件以空行结束

7.**trim_trailing_whitespace <blooean>**

是否删除行尾空格

8.**max_line_length **``**<positive integers(正整数) | off>**

最大行宽

常用通配符介绍

*

匹配除/之外的任意字符

******

匹配任意字符串

?

匹配任意单个字符

[name]

匹配name字符

[!name]

不匹配name字符

[s1,s2,s3]

匹配给定的字符串

[num1..num2]

匹配num1到mun2直接的整数

VSCode搜索安装插件配合使用

WebStorm 不需下载插件，IDE默认支持

Eslint 配置错误检测提示

提示效果展示

VSCode 配置自动检测提示

下载ESLint 插件

vscode 安装eslint插件后会默认支持项目.eslintrc.js配置错误提示

VSCode 配置保存文件ESLint自动修复错误

文件->首选项->设置->找到ESLint 选中Auto Fix On Save

WebStorm 配置自动检测提示

WebStorm 配置保存文件ESLint自动修复错误

1.方法一设置快捷键修复

打开设置 -> Keymap 搜索 Fix ESLint Problems，双击配置快捷键，这里使用的是Ctrl + S。如果有冲突，选择其快捷键。

2.方法二监听文件变化自动修复

打开设置-> 搜索 File Watchers 添加新的prettier规则

选择File type 为 Any ,增加项目Scope作用域

新建作用域增加规则，排除不需要监听的文件。

单词拼写检查

VSCode 下载 Code Spell Checker 支持单词拼写检查

WebStrom 默认支持单词拼写检查

IDE设置VUE代码片段

设置代码片段快速生成符合设计规范的组件

VSCode配置代码片段

文件->首选项->用户代码片段->搜索vue.json->添加下面代码片段

VSCode代码片段

{
	"vue-tpl": {
	  "prefix": "vue-tpl",
	  "body": [
		"<template>",
		"  <div class=\"toggle toggle--simple\">",
    	"    <div class=\"toggle__control toggle__control--active\">",
    	"      <h2 class=\"toggle__title\">Title</h2>",
    	"    </div>",
    	"    <div class=\"toggle__details toggle__details--active\">",
        "      ...",
    	"    </div>",
    	"      ...",
		"  </div>",
		"</template>",
  
		"<script>",
		"export default {",
		"  name: \"$1\",",
		"  components: {},",
    "  props: {},",
		"  data() {",
		"    return {};",
		"  },",
		"  computed: {},",
		"  methods: {},",
		"  watch: {},",
		"  created() {},",
		"  mounted() {}",
		"};",
		"</script>",
  
		"<style lang=\"scss\" scoped>",
		"  //.toggle {}",
		"  //.toggle--simple {}",
		"  //.toggle__control {}",
		"  //.toggle__control--active {}",
		"  //...",
		"</style>",
	  ],
	  "description": "vue template"
	}
}

VSCode使用代码片段

.vue 文件输入vue-tpl

WebStorm配置代码片段

Preferences-> 搜索Live Template->选择Live Templates->右侧➕号添加片段->片段命名描述->change选择作用域->添加下方片段至Template text中

Webstorm代码片段

<template>
  <div class="toggle toggle--simple">
    <div class="toggle__control toggle__control--active">
      <h2 class="toggle__title">Title</h2>
    </div>
    <div class="toggle__details toggle__details--active">
      ...
    </div>
    ...
  </div>
</template>
<script>
export default {
  name: "$componentName$",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  methods: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
//.toggle {}
//.toggle--simple {}
//.toggle__control {}
//.toggle__control--active {}
//...
</style>

WebStorm使用代码片段

.vue 文件中输入vue-tpl 按下**tab**键

代码片段介绍

1.BEM规范命名CSS

BEM是由Yandex提出的给一个CSS命名方法, 该方法要求使用一个CSS类名, 尽可能使用以下三者组成:

块名: 所属组件的名称
元素: 元素在块里面的名称
修饰符: 任何与块或元素相关联的的修饰符

块名
这里的块名指的是一个独立的模块或组件. 例如一个<header>可以用做一个模块, <header>中的<nav>可以用作一个模块. 模块之间是可以相互嵌套的. 上面的示例代码中 ,toggle就是一个独立的模块
元素
元素是指无法用在其他块名中的部分, 在BEM方法中, 元素跟在块名后面使用__连接, 之所以约定使用双下划线是因为方便在块名中使用单下划线命名. 上面示例代码中的toggle__control,toggle__title就是块名+元素的命名方式.
修饰符
修饰符与SMACSS中的状态类似, 在BEM方法中, 修饰符需要跟在元素后面使用--连接. 有的人会觉得这种写法会使得代码冗余, SMACSS使用is-active同样可以表示同样的作用, 为什么上面的代码要使用toggle__details--active呢? 其实, 如果单独看is-active这个名字, 我们并不知道它们的含义是什么, 但是当看到一个toggle__details--active的类名, 我们就知道它是表示: 这个元素的名称是details, 位置在toggle组件里, 状态为active.

2.遵循vue-cli项目目录结构设计中的 vue 生命周期排列顺序

3.每个CSS类名都有一个独一无二的标识，无需嵌套

CSS使用BEM规范后，每一个CSS类名都有一个独一无二的标识，这样是每个CSS类名都对应到某一组独属于该元素的CSS属性，而不会随着具体情境或选择器的使用而变化。

<div class="main">
	<h2 class="content__title">Header</h2>
</div>
<div class="sidebar">
	<h2 class="content__title--reversed">Sidebar Header</h2>
</div>
<div class="calendar">
  <h2 class="calendar__title">Calendar Header</h2>
</div>

/*组件文件夹*/
.content__title {
	font-size: 24px;
  color: red;
}
.content__title--reversed {
  font-size: 20px;
  color: white;
}
.calendar__title {
	font-size: 20px;
  color: red
}
/*布局文件夹*/
.main{
  float: left;
  ...
}
.sidebar {
	float: right;
  ...
}

这样就解决了由于依赖位置而造成CSS样式混乱的问题。

似水流年

推荐使用IDE