vscode js vue eslint prettier 项目代码规范 格式化

絮
2,456 阅读7分钟

工欲善其事，必先利其器

比喻要做好一件事，准备工具非常重要。找到了好的工具能做的事半功倍的作用；而且做起来也很舒服啊。

前言

有时候我想看别人提交的代码改了什么东西，结果他们改了个小东西，保存的时候把整个文件按照他本地规则格式化了...我￥%&#@

需求

所以我想要一套好的代码规范，代码格式化，并且能满足不同的项目差异化，还能覆盖用户的本地规范。

点了一份vsCode插件EditorConfig eslint Prettier 套餐。

一个项目下会包括这几个文件，这就是套餐内配的几个文件了。

image.png

EditorConfig

EditorConfig 帮助使用不同IDE开发同一个项目的开发者，维持固定统一的代码风格。简而言之，EditorConfig就是为了抹平不同IDE的代码格式差异的

安装vsCode插件EditorConfig for VS Code之后,这个配置能直接生效

image.png

通常在项目根目录下，添加.editorconfig配置文件，贴一份常见的配置

# http://editorconfig.org 
root = true 
[*] 
# 用空格代替制表符； 
indent_style = space 
# 行前缩进2； 
indent_size = 2 
# 换行符为lf，可选crlf或lf
end_of_line = lf 
# 设置文件编码为 UTF-8； 
charset = utf-8 
# 在保存时删除尾部的空白字符；
trim_trailing_whitespace = true 
# 在文件结尾添加换行符； 
insert_final_newline = true 

[*.md] 
trim_trailing_whitespace = false 

[Makefile] 
indent_style = tab

eslint

eslint的关注点是代码质量和代码格式。

何为代码质量？如未使用变量、三等号、全局变量声明等问题

何为代码格式？如单行代码太长、tab的长度、空格、逗号，单双引号等问题

对于质量和格式问题，eslint可以给出错误或警告提示，也可以自动修复，autofix;

使用

1、vsCode安装eslint插件。

2、安装eslint依赖

npm install eslint babel-eslint -D

3、在项目根目录下创建.eslintrc.js文件：定义代码规则。


module.exports = {
    root: true,
    env: {
        node: true,//node环境
        es6: true, //注意es6环境使用到要加入
        browser: true,//浏览器环境
    },
    extends: [
        "eslint:recommended",
    ],
    parserOptions: {
        parser: "babel-eslint",
    },
    rules: {
        //eslint规则...
    }
}

恭喜你，这时候eslint已经生效了。注意eslint的规则要避免与prettier冲突

也可以看官方文档自动创建，创建的时候会询问你需要哪些功能，直接帮你引入了 ./node_modules/.bin/eslint --init

eslint.bootcss.com/docs/user-g…

常用配置

"parserOptions"：ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
"parser"：ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器
"env"：一个环境定义了一组预定义的全局变量
"globals"：如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
"plugins"：ESLint 支持使用第三方插件
"rules"：ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则
"extends": 配置文件可以从基本配置扩展启用的规则集。有四种类型

4、.eslintignore文件：定义过滤检查的文件。

会在文章最后贴上一份.eslintrc.js配置，具体规则可根据自身需要修改。

VsCode

这时候你可能需要自动修复代码；那就需要配置vscode的settings.json文件。（具体在哪自行百度）

{
    //开启保存自动格式化
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    },
    //定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
    "[javascript][typescript][vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    //应由 ESLint 验证的语言 ID 数组。 如果没有安装 ESLint 会显示错误。
    "eslint.validate": [
        "typescript",
        "typescriptreact",
        "vue"
    ],
}

也可以在项目下创建vscode规则，项目根目录创建.vscode目录，目录下创建settings.json文件，添加上面代码，就会替换开发者本地的配置。（可能开发者的本地配置已经更改了很多的默认配置，需要的话可能把所有默认配置加上去。= =）

Prettier

Prettier：代码的格式化和修复。

代码检测的话ESLint 更优秀，但是ESLint 只能格式化 js/ts 文件，而 Prettier 支持多种文件

  • JavaScript/TypeScript
  • CSS/Less/SCSS
  • HTML
  • JSON/YAML/GraphQL
  • Markdown
  • Vue/React/Angular

使用

1、vsCode安装Prettier - Code formatter插件

image.png

2、安装依赖，prettier需要用到以下三个依赖

npm install prettier eslint-plugin-prettier eslint-config-prettier -D

3、在eslint中引入。

//.eslintrc.js文件中
module.exports = {
    extends: [
        "eslint:recommended",
        "plugin:prettier/recommended",//加入这一行，这是官方推荐的引入方式
    ],
}

4、.prettierrc.js文件,以下配置可根据需要修改（注意会有默认配置，还有注意与eslint的冲突格式）

{
    "printWidth": 140, // 单行输出（不折行）的（最大）长度
    // "useTabs": true, // 不使用缩进符，而使用空格
    "tabs": true, // 使用制表符 (tab) 缩进行而不是空格 (space)
    "tabWidth": 2, // 每个缩进的空格数
    "semi": true, // 是否在语句末尾打印分号
    "singleQuote": true, // 是否使用单引号
    "quoteProps": "as-needed", // 尽在需要时在对象属性周围添加引号
    "trailingComma": "all", // 去除对象最末尾元素跟随的逗号
    "arrowParens": "always", // 箭头函数，只有一个参数的时候，也需要括号
    "proseWrap": "always", // 当超出print width（上面有这个参数）时就折行
    "endOfLine": "crlf", // 换行符使用 crlf
    "bracketSpacing": true, // 是否在对象属性添加空格
    "jsxBracketSameLine": true, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,默认false,这里选择>不另起一行
    "htmlWhitespaceSensitivity": "ignore", // 指定 HTML 文件的全局空白区域敏感度, ignore- 空格被认为是不敏感的
    "jsxSingleQuote": false, // jsx 不使用单引号，而使用双引号
    "rangeStart": 0 // 每个文件格式化的范围是文件的全部内容
}

注意

不知道是不是版本不兼容的情况，经常出现了vue或者prettier引入失败的问题；这里做个总结。

  • 注意部分依赖更新后需要重启工作区才能生效；
  • 最好多去看官方文档引入和修改，比如prettier的格式化，eslint的引入

注意引入依赖的的版本号和eslint

vue2

//package.json
"devDependencies":{
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "^4.5.12",
    //****注意以下依赖版本****
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.5.1",
    ...
}

//.eslinttrc.js
    extends: [
            'eslint:recommended',
            'plugin:vue/recommended',
            'plugin:prettier/recommended',
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
            parser: 'babel-eslint',
    },
    plugins: ['vue', 'prettier'],
    ...

vue3

//package.json
"devDependencies":{
    //****注意以下依赖版本****
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.15.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "prettier": "^2.6.2",
    "vue-eslint-parser": "^9.0.1",
    "typescript": "^4.5.2",
    ...
}

//.eslinttrc.js
extends: [
        'eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
],
parser: 'vue-eslint-parser',
parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        jsxPragma: 'React',
        ecmaFeatures: {
                jsx: true,
        },
},
plugins: ['vue', '@typescript-eslint', 'prettier'],
...

最后贴上一份.eslinttrc.js代码vue3；

可根据需要删改。

module.exports = {
	root: true,
	env: {
		node: true,
		es6: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
	],
	parser: 'vue-eslint-parser',
	parserOptions: {
		parser: '@typescript-eslint/parser',
		ecmaVersion: 2020,
		sourceType: 'module',
		jsxPragma: 'React',
		ecmaFeatures: {
			jsx: true,
		},
	},
	plugins: ['vue', '@typescript-eslint', 'prettier'],
	rules: {
		'vue/multi-word-component-names': 'off',
		'vue/max-attributes-per-line': [
			'error',
			{
				singleline: 5, //标签超出5个属性就会换行
			},
		],
		/*
              ---------------
              POSSIBLE ERRORS
              ---------------
           */
		eqeqeq: 'error', // 要求使用 === 和 !==
		'no-extra-semi': 1, // 禁止多余的分号
		'for-direction': 2, // for 循环死了
		'no-cond-assign': 2, // 防止 if 写成赋值
		'no-dupe-args': 2, // 禁止参数重名
		'no-dupe-keys': 2, // 禁止 key 重名
		'no-duplicate-case': 2, // 禁止 case 重复
		'no-func-assign': 2, // 禁止覆盖函数字面量
		'no-inner-declarations': [2, 'both'], // 禁止在 if 中 var
		'no-irregular-whitespace': 2, // 禁止非常规空白
		'no-prototype-builtins': 2, // 禁止直接调用 obj 上的 proto 方法
		'no-sparse-arrays': 2, // 防止数组中多余的逗号
		'no-template-curly-in-string': 2, // 禁止字符串中出现 ${}
		'no-unreachable': 2, // 禁止出现无法执行到的语句
		'no-unsafe-finally': 2, // 禁止 finally 出现控制语句
		'no-unsafe-negation': 2, // 禁止有歧义、不安全的 ! 号
		'use-isnan': 2, // 强制 isNaN()
		'valid-typeof': 2, // 防止 typeof 类型的字符写错
		// "valid-jsdoc": 2, // 如果有的话，校验 jsdoc

		// 小括号中的空格
		'space-in-parens': [1, 'never'],
	},
};
avatar
文章
阅读
粉丝