评论

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

代码美化+IDEA无限香+prettier

IDEA

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

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

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

xxxxxxxx

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

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

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

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

使用前

使用后

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

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

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

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

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

eslint

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

eslint 配置

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

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

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

配置主要的信息分为三类

  1. Environments:你的javascript脚本将要运行在什么环境中(例如:node.js、browser、commonjs等)。
  2. Globals: 执行代码脚本时需要访问的额外全局变量。
  3. 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.

  1. 可以右键选择 Prettier with Prettier
  2. 可以⇧⌘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。代码格式化是一部分,别忘了加上合适的注释,搭配使用才完美

相关链接:

梳理前端开发使用eslint和prettier来检查和格式化代码问题:https://www.jianshu.com/p/d38e7e3b80cb

eslint 产生的各种错误:https://blog.tomyail.com/how-to-lint-legacy-jscode-in-30min/

最后一次编辑于  2019-12-13  
点赞 3
收藏
评论

2 个评论

  • 子不语
    子不语
    2019-12-12

    先点后看,已成习惯(eslint 滚粗)

    2019-12-12
    赞同
    回复 2
    • 小满
      小满
      2019-12-13
      prettier 就像一个漂亮的小姐姐,越x越x
      2019-12-13
      回复
    • 子不语
      子不语
      2019-12-13回复小满
      。。。
      2019-12-13
      回复
  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    2019-12-12

    wenstrom。。

    习惯了vscode保存即格式化代码~


    2019-12-12
    赞同
    回复 3
    • 小满
      小满
      2019-12-13
      以修改,哥哥你好厉害
      2019-12-13
      回复
    • 杭州弧途科技有限公司
      杭州弧途科技有限公司
      2019-12-13回复小满
      阿咧咧?
      2019-12-13
      回复
    • 小满
      小满
      2019-12-13
      哇咔咔
      2019-12-13
      回复
登录 后发表内容