养成良好的代码风格--03 IDEA - WXOPEN Club

IDEA

良好的统一的代码风格的好处真的是太多了。。。。

算是接上篇文，因为最近接手维护一个管理后台。撸小程序的时候管理后台也要修修改改，过个工具来回切有点耗内存，加上开发者工具也不少吃，小机子扛不住了～。为了解决这个问题，我选择了这个超集工具IDEA，平时的话在用vscode，做项目用IDEA。

👉 IDEA 撸码开发者工具只做预览，嗯。舒服，觉得开发者工具卡的话也可以用其他工具+开发者工具配合使用。

xxxxxxxx

代码格式化是一部分，别忘了加上合适的注释，搭配使用才完美

因为之前vscode用了eslint + prettier 根本好用到停不下来，昨天打算用它来开发小程序，那必须也要用上。很可惜 prettier 不支持 *.wxml *.wxss 所以对着文档配置（加班搞呀搞呀搞呀搞），今天又接着配置，可惜在IDEA就是不生效，，，，，放弃 😊。。。

最后解决办法是 js 和json 用prettier 。wxml wxss 用IDEA自带的格式化处理。

维护自己的项目都头晕烟花，更别说维护其他人的，先美化一下是不是舒服多了

使用前

使用后

然后就是一个很好用的功能 file-watchers 。webstrom 自带支持，IDEA需要去插件市场安装插件，使用方法还是一样的。超集真的是爸爸级别的。

个人习惯设置为主动保存或者10s无动作自动格式化。👇

有一个趁手的工具还是很有必要的。

prettier大神教教我怎么添加其他类型的文件，按照文档怎么都不生效。。。👇下面是配置经过，

养成良好的代码习惯少不了 eslint。今天主要使用了两个插件prettier和file-watchers。file watch、prettier 在webstrom自带有，IDEA的话需要安装插件。

eslint

eslint是用来识别 ECMAScript 并且按照规则给出报告的代码检测工具。使用它可以避免第几错误和统一代码的风格。

eslint 配置

ESlint被设计为完全可配置的，主要有两种方式来配置

在注释中配置：使用JavaScript注释直接把配置潜逃到JS文件中
配置文件：使用配置文件为所有目录或子目录指定配置信息
javascript：使用.eslintrc.js文件配置并导出一个包含配置的对象。
YAML：.eslintrc.yamlor.eslintrc.yml。
JSON: .eslintrc.json，json文件允许使用JS形式的注释。
package.json: 在package.json 文件中创建eslintConfig属性，所有的配置包含在这个属性中。
废弃的用法: .eslintrc 可以是JSON或者YAML。

这些配置文件的优先级的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

配置主要的信息分为三类

Environments：你的javascript脚本将要运行在什么环境中（例如：node.js、browser、commonjs等）。
Globals: 执行代码脚本时需要访问的额外全局变量。
Rules：规则

// 参考AlloyTeam配置
module.exports = {
    extends: [
        'alloy',
    ],
    env: {
        // 这里填入你的项目用到的环境
        // 它们预定义了不同环境的全局变量，比如：
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 这里填入你的项目需要的全局变量
        // false 表示这个全局变量不允许被重新赋值，比如：
        //
        // myGlobal: false
    },
    rules: {
        // 这里填入你的项目需要的个性化配置
    }
};

eslint 安装

IDEA eslint网址：https://www.jetbrains.com/help/idea/eslint.html

1.In the embedded Terminal (⌥F12), type one of the following commands:

npm install eslint -g for global installation.

npm install eslint --save-dev to install ESLint as a development dependency.

2.Optionally, install additional plugins, for example, eslint-plugin-react to lint React applications.

安装完毕后，接下来新建一个配置文件.eslintrc.js，或者使用如下的命令行来自动生成。`eslint --init`

AlloyTeam ESLint 规则

AlloyTeam ESLint 规则不仅是一套科学的 ESLint 配置规范，而且也是你配置个性化 ESLint 规则的最佳参考。https://github.com/AlloyTeam/eslint-config-alloy 个人觉得用这个足够了，如果团队有其他配置，在此基础上添加相关配置。

Prettier

AlloyTeam 文档有写，v3 版本去掉了所有样式相关的规则（比如缩进、分号等），这些规则应该交给更专业的 Prettier 来处理。然后了解了下 prettier（webstrom以及内置，IDEA单独安装插件）。官网：https://prettier.io/

prettier安装

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

AlloyTeam 使用的 prettier.config.js 配置，仅供参考

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    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'
};

IDEA 使用

在设置中简单设置，路径 Languages and Frameworks | JavaScript | Prettier.

可以右键选择 Prettier with Prettier
可以⇧⌘A 从查找操作（Actions）中选择 Prettier with Prettier

file Watching

每次都要快捷键有点儿麻烦，所以配置下Watching 。 IDEA是没有这个选项装上插件后就可以参考webstrom的配置了。路径在 Preferences | Tools | File Watchers。
插件使用网址：https://www.jetbrains.com/help/idea/tutorial-file-watchers-in-product.html。
prettier配置网址：https://prettier.io/docs/en/webstorm.html

常见错误：prettier error=13, Permission denied，解决办法全局安装Prettier，填入/usr/local/bin/prettier(mac).可正常使用

实现效果编辑完，编辑器自动保存，触发自动保存。

错误类型

代码风格方面的

quotes: 必须使用单引号,而不是双引号表示字符串.
prefer-template: 使用模板字符串操作字符串拼接.
key-spacing: 关键字之间的空格样式问题.
brace-style: 大括号的样式
indent:缩进 2 两个空格.

代码质量方面的

prefer-const: 使用 const 关键字表示所有不会被修改的变量.
no-var: 不使用 var 表示变量,而是使用 let.
no-unused-vars:不允许定义了但是未使用的变量.
eqeqeq: 使用全等 === 比较
no-undef: 变量未定义

小建议：全局配置安装，之后的项目里只需要建一个配置文件就可以了，不用到处npm install。代码格式化是一部分，别忘了加上合适的注释，搭配使用才完美