2023.22 代码格式化

互联网科技扁平风公众号封面首图__2023-05-13+17_28_58.jpeg

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。。

我想学习代码格式化，是因为每次拉到一个新项目代码格式由于个人习惯问题已经将代码格式化规则配置为个人的格式化规则了。但是在团队里面可不允许你这么做，拉到一个新的项目，一般都会有一些基础的格式化配置，我们经常用的是eslint+prettier这两个结合使用的。但是拉到一个新的项目时，由于本地的规则和项目规则有冲突就会造成自动格式化完之后代码又被还原的情况，这样就会搞得我们很混乱。

一种比较好的做法是，在项目里声明.vscode文件，一下文件夹下新建settings.json文件，这个文件配置和vscode中首选项里面配置是一样的，好处是，我们可以直接按照项目的规范，不必要在本地重设一套代码格式规则。

elsint

用来检测不合法或者无用的代码，默认只处理js，可以配合插件使用格式化其他类型的文件。

项目跟目录下新建.vscode

.vscode下新建settings.json，

两种不生效的情况：

第一种：如果你的vscode中安装了Eslint插件那么配置了该配置会生效，否则不会生效

{
    "eslint.enable": true, //开启eslint检查
}

我卸载了eslint，然后在.eslintrc.json中配置了不允许使用console没有提示报错

1683550795315.png

启用之后

1683551320982.png

所以使用eslint之前必须先安装插件，如果安装了之后没有生效，需要重启下vscode

第二种：我安装了eslint但是开发环境没有安装eslint的包可以生效吗？答案不能

1683551320982.png

安装eslint包，npm i eslint

1683551372569.png

安装完之后发现有效果了，但是提示的信息是什么import是保留字的问题，import明明是esmcscript的语法啊

此时需要我们配置我们的解析器，告诉解析器我们要解析的源类型是什么，需要解析成什么。通常配合parser一起使用,它用来指定具体如何解析代码的策略 ，参考

{
    "parserOptions": {
        "ecmaVersion": "latest",//配置使用允许使用ecma最新语法
        "sourceType": "module"//配置为module则可以使用export default和module.exports语法，否则只能编写js代码，默认为script，即只能编写js代码
    },
    "rules": {
        "no-console": "error"
    }
}

配置完成后效果

1683551320982.png

通常情况，我们会结合其他插件来使用，例如eslint-vue-plugin来规范.vue代码，利用parse，例如：@babel/eslint-parser、@typescript-eslint/parser配置解析器。

prettier

对文件内容的格式进行处理。

安装prettier插件

项目根目录下新建.prettierrc.json文件，配置如下

{
  "semi":false,//代码后面加;
  "singleQuote": true //设置使用双引号
}

保存文件会自动对文件进行格式化

下篇学习怎么写一个谷歌插件