Angular 学习笔记 (Angular 12 get started)

梁满根 發表於 2021-5-28 12:06:00

Angular 学习笔记 (Angular 12 get started)

Angular 12 视乎比以往更稳定了. 
这里记入一般的 get started 结构和做法. 
 
第 1 步, 创建项目.
<div class="cnblogs_code">
<pre>ng new project --create-application=false</pre>
</div>
默认会自动创建 app, 先关掉它.
 
第 2 步, 装 eslint 和 prettier 
早期 ng 是用 tslint 的, 后来废弃了, 现在改用 eslint 
https://github.com/angular-eslint/angular-eslint 这个是第三方的，但是做的很好一下.
<div class="cnblogs_code">
<pre>ng add @angular-eslint/schematics
ng config cli.defaultCollection @angular-eslint/schematics</pre>
</div>
然后就安装 Prettier - Code formatter vscode 插件
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
setup vs code setting 
<div class="cnblogs_code">
<pre>"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,</pre>
</div>
然后安装 prettier
<div class="cnblogs_code">
<pre>yarn add prettier --dev</pre>
</div>
要让 prettier 和 eslint 一起工作. 我们需要安装一些 prettier 的 plugin
<div class="cnblogs_code">
<pre>yarn add eslint-plugin-prettier eslint-config-prettier --dev</pre>
</div>
然后就创建 app
<div class="cnblogs_code">
<pre>ng g app control-panel --routing --style=scss --prefix=cp</pre>
</div>
每一个 app 或 lib 都会自带 .eslintrc.json, 尽量不要使用全局的, best practice 是每一个 app 或 lib 独立管理 (虽然会有重复的设置啦, 但是不多啦)
由于我使用 eslint standard config 所以我要装
<div class="cnblogs_code">
<pre>yarn add eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise --dev</pre>
</div>
这个是最终版本的 eslintrc.json, 所以我没有使用 root eslintrc.json 然后我使用了 eslint standard config, 然后我没有 e2e, 其它的都是安装官网配置的了. 
<div class="cnblogs_code">
<pre>{
"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"
 }]
 }
}
]
}</pre>
</div>
 
第 3 步安装 library
<div class="cnblogs_code">
<pre>ng g lib stooges --prefix=s</pre>
</div>
通常一个 project 里面会有好几个 app, shared code 就可以做一个 library 来管理, 以后要发布也比较容易.
由于我没有要做成发布的版本，所以我需要修改一下 ts config
<img src="https://img2020.cnblogs.com/blog/641294/202105/641294-20210528115944364-562695056.png">
 
 
第 4 步安装 tailwind css 和 stylelint
tailwind 火, 无论如何都是要跟风一下的啦.
<div class="cnblogs_code">
<pre>yarn add tailwindcss postcss autoprefixer stylelint stylelint-scss stylelint-config-recommended stylelint-prettier stylelint-config-prettier --dev</pre>
</div>
tailwind.config.js
<div class="cnblogs_code">
<pre>module.exports = {
purge: {
enabled: true,
content: ['./projects/*/src/**/*.html'],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};</pre>
</div>
stylelint.config.js
<div class="cnblogs_code">
<pre>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
 },
],
},
};</pre>
</div>
vs code setting 
<div class="cnblogs_code">
<pre>"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,</pre>
</div>
 
到这里我们就有了一个 project 通常会用到的结构了. 
  
来源：https://www.cnblogs.com/keatkeat/p/14821676.html

頁: [1]

琼殿技术论坛's Archiver

Angular 学习笔记 (Angular 12 get started)