Angular 学习笔记 (Angular 12 get started)

2021-05-28 12:35:37 阅读：248 来源： 互联网

标签：12 stylelint get config plugin prettier true Angular eslint

Angular 12 视乎比以往更稳定了.

这里记入一般的 get started 结构和做法.

第 1 步, 创建项目.

ng new project --create-application=false

默认会自动创建 app, 先关掉它.

第 2 步, 装 eslint 和 prettier

早期 ng 是用 tslint 的, 后来废弃了, 现在改用 eslint

https://github.com/angular-eslint/angular-eslint 这个是第三方的，但是做的很好一下.

ng add @angular-eslint/schematics
ng config cli.defaultCollection @angular-eslint/schematics

然后就安装 Prettier - Code formatter vscode 插件

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

setup vs code setting

"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleQuote": true,
"editor.formatOnSave": true,
"eslint.options": {
  "extensions": [".ts", ".html"]
},
"eslint.validate": [
  "javascript",
  "typescript",
  "html"
],
"editor.codeActionsOnSave": {
    "source.fixAll.tslint": true,
    "source.fixAll.eslint": true
},
"editor.detectIndentation": false,

然后安装 prettier

yarn add prettier --dev

要让 prettier 和 eslint 一起工作. 我们需要安装一些 prettier 的 plugin

yarn add eslint-plugin-prettier eslint-config-prettier --dev

然后就创建 app

ng g app control-panel --routing --style=scss --prefix=cp

每一个 app 或 lib 都会自带 .eslintrc.json, 尽量不要使用全局的, best practice 是每一个 app 或 lib 独立管理 (虽然会有重复的设置啦, 但是不多啦)

由于我使用 eslint standard config 所以我要装

yarn add eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise --dev

这个是最终版本的 eslintrc.json, 所以我没有使用 root eslintrc.json 然后我使用了 eslint standard config, 然后我没有 e2e, 其它的都是安装官网配置的了.

{
  "root": true,
  // "extends": "../../.eslintrc.json", // we don't have root file, so use root: true instead
  "ignorePatterns": [
    "!**/*"
  ],
  "overrides": [{
      "files": [
        "*.ts"
      ],
      "extends": [
        "standard",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "plugins": [
        "@typescript-eslint"
      ],
      "parserOptions": {
        "project": [
          "projects/control-panel/tsconfig.app.json",
          "projects/control-panel/tsconfig.spec.json"
          // "projects/control-panel/e2e/tsconfig.json" // we don't have e2e now
        ],
        "createDefaultProgram": true
      },
      "rules": {
        "space-before-function-paren": "off",
        "no-multiple-empty-lines": "off",
        "no-new": "off",
        "no-extend-native": "off",
        "prettier/prettier": ["error", {
          "singleQuote": true,
          "endOfLine": "auto" // refer: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier
        }],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "cp",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "cp",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        "prettier/prettier": ["error", {
          "parser": "angular"
        }]
      }
    }
  ]
}

第 3 步安装 library

ng g lib stooges --prefix=s

通常一个 project 里面会有好几个 app, shared code 就可以做一个 library 来管理, 以后要发布也比较容易.

由于我没有要做成发布的版本，所以我需要修改一下 ts config

第 4 步安装 tailwind css 和 stylelint

tailwind 火, 无论如何都是要跟风一下的啦.

yarn add tailwindcss postcss autoprefixer stylelint stylelint-scss stylelint-config-recommended stylelint-prettier stylelint-config-prettier --dev

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ['./projects/*/src/**/*.html'],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

stylelint.config.js

module.exports = {
  extends: ['stylelint-config-recommended', 'stylelint-prettier/recommended'],
  plugins: ['stylelint-scss'],
  rules: {
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
        ],
      },
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
    'prettier/prettier': [
      true,
      {
        endOfLine: 'auto', // refer: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier
      },
    ],
  },
};

vs code setting

"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,

到这里我们就有了一个 project 通常会用到的结构了.

标签：12,stylelint,get,config,plugin,prettier,true,Angular,eslint
来源： https://www.cnblogs.com/keatkeat/p/14821676.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Angular 学习笔记 (Angular 12 get started)