003_vscode自定义格式化规则(ESLint Prettier)2021年

001_vscode自定义格式化规则(ESLint Prettier)(h3)

• vscode下载ESlint , Prettier , Vetur 插件
• 调整Prettier拓展设置

• 拓展程序的配置会有一个名为settings.json的配置文件，通过如上图形界面更改后，当然，配置文件会同步更改。
• 选择项目任意js或vue文件,用Prettier格式化程序格式化，最好将其设置为默认格式化程序

• 格式化后保存终端会出现一些警告，这是因为ESlint 格式化规范和Prettier格式化规则冲突了。继续

• 自定义ESlint 规范

  • 在.eslintrc.js 中覆盖prettier规则即可，覆盖是为了防止冲突

  rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'error': 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error': 'off',
      // 添加⾃自定义规则
      'prettier/prettier': [
      // eslint校验不不成功后，error或2则报错，warn或1则警告，off或0则无提示
      'error',
          {
              //单引号代替双引号
              singleQuote: true,
              //不使用封号结尾
              semi: false,
             	// 数组和对象无尾随逗号
             trailingComma: 'none'
          }
      ]
  },
  

• 配置完成后，新建终端，进入项目目录，运行npm run lint 格式化全部文件。(这步可忽略)

• 新建终端，进入项目目录并启动项目。之前出现一些警告消失了。
  • 改变引用后需要重新启动项目（因为引用是以静态方式引入的）