3.自定义指令以及ESlint

星月 7/24/2022 vue

# 3 自定义指令

# 3.1 自定义指令的分类

vue中的自定义指令分为两类，分别是：

私有自定义指令
全局自定义指令

# 3.1.1 私有自定义指令

在每个vue组件中，可以在directives节点下声明私有自定义指令。示例代码如下：

<h1 v-color="color">App 根组件</h1>


export default {
	// 私有自定义指令的节点
  directives: {

    // 定义名为 color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }
    } */

    color(el, binding) {
      el.style.color = binding.value
    }
  }
}

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

# 3.1.2 全局自定义指令

全局共享的自定义指令需要通过 “Vue.directive()” 进行声明，示例代码如下：

Vue.directive('color',function(el,binding){
	el.style.color = binding.value
})
<!-- 全局自定义指令，定义以后可以在项目的任何地方使用这个v-color，有点和过滤器类似！
    Vue.filter('过滤器名字',function(){
        cosole.log('这里是过滤器的执行函数！')
    })
-->

1
2
3
4
5
6
7
8

# 3.1.3 ESLint 代码检查工具

# 关于

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。
ESLink文档官网：https://eslint.bootcss.com/
1

说白了就是在团队开发中约束每个开发人员的代码规范，比如：代码换行是4个空格还是2个空格等等。比如规范化2个空格为换行，你在代码中写了4个空格就会报错提示你。

在vscod中设置代码规范的方法：

管理（小齿轮）、设置、搜索[tabsize]，这里就是改了代码换行的空格数字

2.搜索format ，这里也要打勾（默认就是勾上的）

# 使用

下面创建一个全新的vue-cli来使用ESLint，手动安装带ESLint的vue-cli项目

步骤如下：

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

步骤9

安装项目中

安装过程中最好不好切窗口，耐心等待。

这样就安装完成了

作者：星月

个人博客：星月前端个人博客 (opens new window)

到这里带ESLint的vue2.0项目就安装好了。
在项目首页会有一个名字为.eslintrc.js的配置文件.
当我们在开发中，规范错误了的话，解决方法：
（1）去ESLint官方文档搜这个错误，如图

会了这些肯定是不行的，开发效率太低了，我们在vscod上安装一些插件来辅助开发，自动调整代码格式：

1.ESLint (作者：Dirk Baeumer)

安装好了需要加一点配置文件。vscod、小齿轮、设置、右上角差分页面旁边的一个（打开设置，），打开后是vscod的settings.json文件。然后在顶部添加下面的代码：

//ESlint 插件的配置
"editor.codeActionsOnSave":{

  "source.fixAll":true,

}
1
2
3
4
5

2.prettier - Code formatter (作者：prettier)

安装后也是在项目的根目录下新建一个文件 .prettierrc.js 在文件里面放入下面的代码：

module.exports = {
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
}

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

现在你就可以使用 alt+shift+f 组合键来快速格式化你在VS Code中的代码了。

如果你有其他插件，格式化文档的默认不是 prettier - Code formatter ，那么在项目中右键鼠标、设置格式化文档的方式、选到prettier就好了。

星月前端博客

Choose mode